liguofeng29’s blog

個人勉強用ブログだっす。

CSS3.0のTransition - 中心指定変形(transform-origin)

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> transform-origin </title>
   <style type="text/css">
        div {
            position: absolute;
            width: 90px;
            height: 90px;
            background-color: #bbb;
            border: 2px solid black;
        }
        div.a {
            left: 30px;
            top: 30px;
        }
        div.b {
            left: 30px;
            top: 150px;
        }
        div.c {
            left: 30px;
            top: 270px;
        }
    </style>
</head>
<body>
<div class="a">
変形前
</div>
<div class="a"
style="-moz-transform-origin:left top;-moz-transform:rotate(-25deg);
  -webkit-transform-origin:left top;-webkit-transform:rotate(-25deg);
  -o-transform-origin:left top;-o-transform:rotate(-25deg);">
左上を中心に変形
</div>
<div class="b">
変形前
</div>
<div class="b"
style="-moz-transform-origin:right bottom;-moz-transform:rotate(65deg);
  -webkit-transform-origin:right bottom;-webkit-transform:rotate(65deg);
  -o-transform-origin:right bottom;-o-transform:rotate(65deg);">
右下を中心に変形
</div>
<div class="c">
変形前
</div>
<div class="c"
style="-moz-transform-origin:right center;-moz-transform:rotate(-90deg);
  -webkit-transform-origin:right center;-webkit-transform:rotate(-90deg);
  -o-transform-origin:right center;-o-transform:rotate(-90deg);">
中央を中心に変形
</div>
</body>
</html>

f:id:liguofeng29:20160205213139p:plain