今回は、指定した要素を変化させる「transform」を詳しく見ていきたいと思います。
指定後の画像を見てもいまいちどのような変化があるかわかりづらいと思うので、前回の記事CSSアニメーションの初歩をおさらいで紹介した、animationを使って
変化の状態を見ながら確認しようと思います。今回も説明のベンダープレフィックスは省略していますが、動作はFirefoxとChromeの最新で確認しています。
また、このプロパティは3Dの指定もありますが、今回は平面の2D指定のみだけにします。
rorate
要素の回転を指定します。
- transform: rotate();・・・XとYを同時に指定
- transform: rotateX();
- transform: rotateY();
transform: rotate();（角度の変更）
#img01 img {
animation: animation01 2s infinite ease 1s both;
}
@keyframes animation01 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
transform: rotateX();（X軸回転）
#img02 img {
animation: animation02 2s infinite ease 1s both;
}
@keyframes animation02 {
from {
transform: rotateX(0deg);
}
to {
transform: rotateX(360deg);
}
}
transform: rotateY();（Y軸回転）
#img03 img {
animation: animation03 2s infinite ease 1s both;
}
@keyframes animation03 {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
translate
要素を移動させます。
- transform: translate();・・・XとYを同時に指定
- transform: translateX();
- transform: translateY();
transform: translate();（X,Y軸の移動）
translateXとtranslateYを同時に指定しています。
#img04 img {
animation: animation04 2s infinite ease 1s both;
}
@keyframes animation04 {
from {
transform: translate(0,0);
}
to {
transform: translate(50px,50px);
}
}
transform: translateX();（X軸の移動）
#img05 img {
animation: animation05 2s infinite ease 1s both;
}
@keyframes animation05 {
from {
transform: translateX(0px);
}
to {
transform: translateX(50px);
}
}
transform: translateY();（Y軸の移動）
#img06 img {
animation: animation06 2s infinite ease 1s both;
}
@keyframes animation06 {
from {
transform: translateY(0px);
}
to {
transform: translateY(50px);
}
}
scale
要素の拡大・縮小をします。
- transform: scale();・・・XとYを同時に指定する。
- transform: scaleX();
- transform: scaleY();
transform: scale();(XとY軸の拡大・縮小)
#img07 img {
animation: animation07 2s infinite ease 1s both;
}
@keyframes animation07 {
from {
transform: scale(1,1);
}
to {
transform: scale(1.5,1.5);
}
}
transform: scaleX();(X軸の拡大・縮小)
#img08 img {
animation: animation08 2s infinite ease 1s both;
}
@keyframes animation08 {
from {
transform: scaleX(1);
}
to {
transform: scaleX(1.5);
}
}
transform: scaleY();(Y軸の拡大・縮小)
#img09 img {
animation: animation09 2s infinite ease 1s both;
}
@keyframes animation09 {
from {
transform: scaleY(1);
}
to {
transform: scaleY(1.5);
}
}
skew
要素を傾斜変形させる。
- transform: skew();・・・XとYを同時に指定する。
- transform: skewX();
- transform: skewY();
transform: skew();(XとY軸の傾斜変形)
#img10 img {
animation: animation10 2s infinite ease 1s both;
}
@keyframes animation10 {
from {
transform: skew(0,0);
}
to {
transform: skew(10deg,15deg);
}
}
transform: skewX();(X軸の傾斜変形)
#img11 img {
animation: animation11 2s infinite ease 1s both;
}
@keyframes animation11 {
from {
transform: skewX(0,0);
}
to {
transform: skewX(15deg);
}
}
transform: skewY();(Y軸の傾斜変形)
#img12 img {
animation: animation12 2s infinite ease 1s both;
}
@keyframes animation12 {
from {
transform: skewY(0);
}
to {
transform: skewY(15deg);
}
}
transform-origin（基準点変更）
変形の基準点を変更できます。初期値は要素の真ん中になっています。
％の他、left centerのようなキーワードやpxでも指定できます。
#img13 img {
transform-origin: 100% 100%;
animation: animation13 2s infinite ease 1s both;
}
@keyframes animation13 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
---------------その他の指定----------------------
transform-origin: 0% 0%;/* 左上 */
transform-origin: 100% 0%;/* 右上 */
transform-origin: 0% 100%;/* 左下 */
#img14 img {
transform-origin: 0% 100%;
animation: animation14 2s infinite ease 1s both;
}
@keyframes animation14 {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
というわけでtransformの基本的な使い方でした。
コメント