コピペOK! css3 transformの使い方【まとめ】
css3 transformの使い方のまとめ。必要に応じてベンダープレフィックスを付与してくださいね。要素にマウスを乗せると変化がわかります。
共通コード
html
[html]
<div class="transform-item">
<span class="※１"></span>
</div>
[/html]
※1 各値がクラス名になります。
css
cssは変化がわかりやすいように「transition:0.3s」を指定していますが、別になくても変化はします。
[css]
transform-item span{
transition:all 0.3s;
display:inline-block;
height: 100px;
width: 100px;
background: #ff80b6;
}
[/css]
scale
要素を拡大・縮小。
scale(2)
[css]
.transform-item .scale{
transform: scale(2);
}
[/css]
scaleX(2)
[css]
.transform-item .scaleX{
transform: scaleX(2);
}
[/css]
scaleY(2)
[css]
.transform-item .scaleY{
transform: scaleY(2);
}
[/css]
scaleZ(2)
[css]
.transform-item .scaleZ{
transform: scaleZ(2);
}
[/css]
scale3d(2,2,2)
[css]
.transform-item .scale3d{
transform: scale3d(2,2,2);
}
[/css]
rotate
要素を回転。
rotate(180deg)
[css]
.transform-item .rotate{
transform: rotate(180deg);
}
[/css]
rotateX(180deg)
[css]
.transform-item .rotateX{
transform: rotateX(180deg);
}
[/css]
rotateY(180deg)
[css]
.transform-item .rotateY{
transform: rotateY(180deg);
}
[/css]
rotateZ(180deg)
[css]
.transform-item .rotateZ{
transform: rotateZ(180deg);
}
[/css]
skew
要素を傾斜変形。
skew(45deg,45deg)
[css]
.transform-item .skew{
transform: skew(45deg,45deg);
}
[/css]
skewX(45deg)
[css]
.transform-item .skewX{
transform: skewX(45deg);
}
[/css]
skewY(45deg)
[css]
.transform-item .skewY{
transform: skewY(45deg);
}
[/css]
translate
要素を移動。
translate(50px)
[css]
.transform-item .translate{
transform: translate(50px);
}
[/css]
translateX(50px)
[css]
.transform-item .translateX{
transform: translateX(50px);
}
[/css]
translateY(50px)
[css]
.transform-item .translateY{
transform: translateY(50px);
}
[/css]
Perspective
要素を遠近効果。
perspectiveは指定した要素ではなく、その移動や変形（transform）を指定した子要素に適用されるので注意。
html
要素を一つ追加しておきます。
「perspectiveクラス」にperspective:数値;を指定します。
「perspective-childクラス」に移動や変形の指定をします。
[html]
<div class="transform-item">
<span class="perspective">
<span class="perspective-child"></span>
</span>
</div>
[/html]
perspective:100px;
transform:rotateX(90deg);
[css]
.transform-item .perspective{
perspective:100px;
}
.transform-item .perspective .perspective-child{
transform: rotateX(90deg);
}
[/css]
perspective:100px;
transform:rotateY(45deg);
[css]
.transform-item .perspective{
perspective:100px;
}
.transform-item .perspective .perspective-child{
transform: rotateY(45deg);
}
[/css]
Transform origin
変形の原点を指定
transform:rotate(45deg);
[css]
.transform-item .transform-origin{
transform-origin:100% 0 0;
transform: rotate(45deg);
}
[/css]
transform:scale(2);
[css]
.transform-item .transform-origin{
transform-origin:0 100% 0;
transform: scale(2);
}
[/css]
transform:scale(2);
[css]
.transform-item .transform-origin{
transform-origin:100% 0 0;
transform: scale(2);
}
[/css]
transform:scaleX(2);
[css]
.transform-item .transform-origin{
transform-origin:0 100% 0;
transform: scaleX(2);
}
[/css]
transform:scaleX(2);
[css]
.transform-item .transform-origin{
transform-origin:100% 0 0;
transform: scaleX(2);
}
[/css]
最後に
今後いろんな動きを追加していく予定ですよ〜。あとこうしてほしいとかあればコメントください！
参考にさせていただいたサイト
この記事を書いたのはおみつ
おバカなJK。webデザイン、マーケティング、考察、雑談など頑張って書きます！文章は苦手。
