Eva

1. Transforms

(1) Translate

transform: translateX(100px) translateY(50%) translateZ(-100px);

transform: translate3d(100px, 50%, 2em);

(2) Scale

transform: scaleX(2) scaleY(0.5) scaleZ(1);

transform: scale3d(2, 0.5, 1);

(3) Rotate

transform: rotate(90deg);

transform: rotateX(30deg) rotateY(60deg) rotateZ(-90deg);

transform: translateY(200px) rotateZ(90deg) scale(3);

transform: rotate3d(1, 2, 3, 90deg);

4.Transition

.cloud{

    width: 240px;

    transition: 1s;

}

.cloud:hover{

    width: 320px;

}

.cloud:hover{

    width: 320px;

    transform: rotate(360deg);

}

.cloud{

    width: 240px;

    transition: width 1s, transform 0.5s;

}

.cloud{

    width: 240px;

    transition: width 1s, transform 0.5s 1s;

}

.cloud{

    width: 240px;

    transition: transform 2s ease-in;

}

.cloud:hover{

    transform: rotate(1080deg);

}