Transform and transition in CSS

transform: Convert

Move, scale, rotate, stretch or stretch elements.

Method: translate():

The element moves from its current position, according to the given left (x coordinate) and top (y coordinate) position parameters

There are two divs, their css styles are as follows:

<span style="font-size: 14px;">.before {
            width: 70px;
            height: 70px;
            background-color: #8fbc8f;
        }

 .after {
            width: 70px;
            height: 70px;
            background-color: #ffe4c4;
            -webkit-transform: translate(50px, 30px);
            -moz-transform: translate(50px, 30px);
            -ms-transform: translate(50px, 30px);
            -o-transform: translate(50px, 30px);
            transform: translate(50px, 30px);
        }
</span>

The results are as follows:

rotate()

The element is rotated clockwise by the given angle. Negative values ​​are allowed and the element will be rotated counterclockwise.

There are two divs, their css styles are as follows

<span style="font-size: 14px;">.before {
            width: 70px;
            height: 70px;
            background-color: #8fbc8f;
        }

.after {
            width: 70px;
            height: 70px;
            background-color: #ffe4c4;
            -webkit-transform: rotate(20deg);
            -moz-transform: rotate(20deg);
            -ms-transform: rotate(20deg);
            -o-transform: rotate(20deg);
            transform: rotate(20deg);
        }
</span>

The results are as follows:

scale()

The size of the element will increase or decrease according to the given width (X-axis) and height (Y-axis) parameters

There are two divs, their css styles are as follows:

<span style="font-size: 14px;">.before {
            width: 70px;
            height: 70px;
            background-color: #8fbc8f;
        }

.after {
            width: 70px;
            height: 70px;
            background-color: #ffe4c4;
            -webkit-transform: scale(1.5, 0.8);/*宽度变为原来的1.5倍，高度变为原来的0.8倍*/
            -moz-transform: scale(1.5, 0.8);
            -ms-transform: scale(1.5, 0.8);
            -o-transform: scale(1.5, 0.8);
            transform: scale(1.5, 0.8);
        }
</span>

The results are as follows:

skew()

The element flips by the given angle, according to the given horizontal (X-axis) and vertical (Y-axis) parameters

<span style="font-size: 14px;">.before {
            width: 70px;
            height: 70px;
            background-color: #8fbc8f;
        }

.after {
            width: 70px;
            height: 70px;
            background-color: #ffe4c4;
            -webkit-transform: skew(20deg, 20deg);/*围绕 X 轴把元素翻转20度，围绕 Y 轴翻转20度*/
            -moz-transform: skew(20deg, 20deg);
            -ms-transform: skew(20deg, 20deg);
            -o-transform: skew(20deg, 20deg);
            transform: skew(20deg, 20deg);
        }
</span>

　

The results are as follows:

transition: transition

The effect of elements gradually changing from one style to another

There is a div with the following css style:

<span style="font-size: 14px;">div {
            width:100px;
            height:100px;
            background-color: #87cefa;
            -webkit-transition: width 2s;/*时长为2s的宽度变化效果*/
            -moz-transition: width 2s;
            -o-transition: width 2s;
            transition: width 2s;
        }
div:hover{
            width:300px;
        }
</span>