liguofeng29’s blog

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

CSS3.0のTransition - 矩形変換(matrixメソッド)

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> matrix </title>
   <style type="text/css">
        div {
            position: absolute;
            width: 120px;
            height: 120px;
            background-color: #bbb;
            border: 1px solid black;
        }
        div.a {
            left: 50px;
            top: 50px;
        }
        div.b {
            left: 50px;
            top: 200px;
        }
    </style>
</head>
<body>
<div class="a">
変形前
</div>
<div class="a"
style="-moz-transform-origin:left top;-moz-transform:matrix(1, 0, 0, 1, 80px, -30px);
  -webkit-transform-origin:left top;-webkit-transform::matrix(1, 0, 0, 1, 80px, -30px);
  -o-transform-origin:left top;-o-transform::matrix(1, 0, 0, 1, 80px, -30px);">
移動
</div>
<div class="b">
変形前
</div>
<div class="b"
style="-moz-transform:matrix(1.5, 0, 0, 0.6, 0px, 0px);
  -webkit-transform::matrix(1.5, 0, 0, 0.6, 0px, 0px);
  -o-transform::matrix(1.5, 0, 0, 0.6, 0px, 0px);">
伸縮1.5, 0.6
</div>
</body>
</html>

f:id:liguofeng29:20160205213503p:plain