-webkit-
, -ms-
를 붙여준다//example
.translate {
-webkit-transform: translate(10px, 50px);
-ms-transform: translate(10px, 50px);
transform: translate(10px, 50px);
}
.scale {
transform: scale(.75);
}
.skew {
transform: skew(5deg, -20deg);
|| transform: skewX(20deg);
|| transform: skewY(20deg);
}
.rotate {
transform: rotate(70deg);
}
.complex {
transform: scale(.5) rotate(20deg);
}
/* Animation Effect */
.translate:hover {
transition: transform 1s linear;
transform: translate(0px, 0px);
}
.scale:hover {
transition: transform 1s linear;
transform: scale(1);
}
.skew:hover {
transition: transform 1s linear;
transform: skew(0, 0);
}
.rotate:hover {
transition: transform 1s linear;
transform: rotate(0);
}
.complex:hover {
transition: transform 1s linear;
transform: scale(1) rotate(0);
}
translate3d(tx, ty, tz)
ex)
transform: perspective(500px) translate3d(10px, 0, 0px);
transition: all 0.5s;
transform: translateX(0%) translateY(0%);
//또는
animation: upSlide 0.3s;
@keyframes upSlide {
from {
transform: translateY(100%);
}
to {
transform: translateY(0%);
}
}
animation: upSlide 0.3s;
@keyframes upSlide {
from {
bottom:0
}
to {
bottom:30px;
}
}
transition: all 0.5s;
transform: translateX(0%) translateY(100%);