liguofeng29’s blog

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

CSS3.0のTransition - 基本変形(transform)

コンポーネント基本変形サンプル

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> transform </title>
   <style type="text/css">
        div {
            display: inline-block;
            width: 60px;
            height: 60px;
            background-color: #bbb;
            border: 2px solid black;
            margin: 20px;
        }
    </style>
</head>
<body>
<div>div要素</div> 
変形なし 
<div>div要素</div><br/>

<div>div要素</div> 
30度回る 
<div style="
  -moz-transform:rotate(30deg);
  -webkit-transform:rotate(30deg);
  -o-transform:rotate(30deg);">div要素</div><br/>
    
<div>div要素</div> 
移動120px,-80px 
<div style="
  -moz-transform:translate(120px,-80px);
  -webkit-transform:translate(120px,-50px);
  -o-transform:translate(120px,-80px);">div要素</div><br/>
    
<div>div要素</div>
伸縮1.9, 0.4 <div style="
  -moz-transform:scale(1.9,0.4);
  -webkit-transform:scale(1.9,0.4);
  -o-transform:scale(1.9,0.4);">div要素</div><br/>
<div>div要素</div> 
伸縮0.8, 2.1 <div style="
  -moz-transform:scale(0.8, 2.1);
  -webkit-transform:scale(0.8, 2.1);
  -o-transform:scale(0.8, 2.1);">div要素</div><br/>
<div>div要素</div> 
傾く <div style="
  -moz-transform:skew(30deg);
  -webkit-transform:skew(30deg);
  -o-transform:scaleskew(30deg);">div要素</div><br/>
<div>div要素</div>
傾く <div style="
  -moz-transform:skewY(30deg);
  -webkit-transform:skewY(30deg);
  -o-transform:skewY(30deg);">div要素</div><br/>
</body>
</html>

f:id:liguofeng29:20160205211757p:plain

コンポーネント基本変形複数適用サンプル

<!DOCTYPE html>
<html>[f:id:liguofeng29:20160205212723p:plain]
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> 複数変形 </title>
   <style type="text/css">
        div {
            position: absolute;
            width: 140px;
            height: 140px;
            background-color: #bbb;
            border: 2px solid black;
            margin: 30px;
        }
    </style>
</head>
<body>
<div>div要素</div><div style="
  -moz-transform:rotate(40deg) translate(200px, 80px) scale(2.4,0.4);
  -webkit-transform:rotate(40deg) translate(20px, 80px) scale(2.4,0.4);
  -o-transform:rotate(40deg) translate(20px, 80px) scale(2.4,0.4);;">複数変形</div>
</body>
</html>