CSS3 Transform deformation comprehension and Application

CSS3 Transform deformation comprehension and Application
Transform: Deformation of elements; Transition: controls the changes (time, etc.) of a certain attribute or multiple attributes of an element, similar to the flash compensation animation. But there are only two key points. Start and end. Animation: controls the changes (such as time) of an element's attributes or multiple attributes, similar to flash's compensation Animation. You can set multiple key secrets. Transition and Animation: transition must trigger an event, while animation can explicitly change the attribute value of the element css over time without triggering any event, to achieve an animation effect. First, we will learn about the Transform 2D/3D conversion attribute to apply 2D or 3D conversion to elements. This attribute allows us to rotate, scale, move, or tilt elements. I. CSS3 2D conversion through CSS3 conversion, we can move, scale, rotate, stretch or stretch elements. 1.2D Transform conversion attribute description CSStransform applies 2D or 3D conversion to elements. 3transform-origin allows you to change the position of the converted element. 32.2D Transform method Function Description Example try to convert translateX (n) translateY (n) to move elements along the X or Y axis. Translate (x, y) moves elements along the X and Y axes. The value of translate (50px, 100px) moves the element 50 pixels from the left and 100 pixels from the top. Div {transform: translate (50px, 100px);-ms-transform: translate (50px, 100px);/* IE 9 */-webkit-transform: translate (50px, 100px);/* Safari and Chrome */-o-transform: translate (50px, 100px);/* Opera */-moz-transform: translate (50px, 100px ); /* Firefox */} Try scaling scaleX (n) scaleY (n) to change the width or height of an element. Scale (x, y) changes the width and height of an element. The value scale (2, 4) converts the width to 2 times the original size, and the height to 4 times the original height. Div {transform: scale (2, 4);-ms-transform: scale (2, 4);/* IE 9 */-webkit-transform: scale (2, 4 ); /* Safari and Chrome */-o-transform: scale (2, 4);/* Opera */-moz-transform: scale (2, 4 ); /* Firefox */} try to define 2D rotation rotate (angle) as defined in the parameter. Turn is a circle, 1 turn = 360deg; there is also a radian rad, 2 π rad = 1 turn = 360deg. For example, transform: rotate (2 turn); // rotate the two-ring value rotate (30deg) to rotate the element 30 degrees clockwise. Div {transform: rotate (30deg);-ms-transform: rotate (30deg);/* IE 9 */-webkit-transform: rotate (30deg ); /* Safari and Chrome */-o-transform: rotate (30deg);/* Opera */-moz-transform: rotate (30deg ); /* Firefox */} Try to tilt skewX (angle) skewY (angle) along X, or Y axis. Skew (x-angle, y-angle) along the X and Y axes. The value of skew (30deg, 20deg) is used to flip elements 30 degrees around the X axis and 20 degrees around the Y axis. Div {transform: skew (30deg, 20deg);-ms-transform: skew (30deg, 20deg);/* IE 9 */-webkit-transform: skew (30deg, 20deg);/* Safari and Chrome */-o-transform: skew (30deg, 20deg);/* Opera */-moz-transform: skew (30deg, 20deg ); /* Firefox */} try to use a matrix of six values. Matrix (n, n) defines 2D conversion, using a matrix of six values. The matrix () method combines all 2D conversion methods. The matrix () method requires six parameters, including mathematical functions that allow you to rotate, scale, move, and tilt elements. Use the matrix Method to rotate the div element by 30 degrees div {transform: matrix (0.866, 0.5,-0.5, 0.866, 0.866);-ms-transform: matrix (0.5, -0.5, 0.866, 0.866);/* IE 9 */-moz-transform: matrix (0.5, 0.5,-0.866 ); /* Firefox */-webkit-transform: matrix (0.866, 0.5,-0.5, 0.866, 0.866);/* Safari and Chrome */-o-transform: matrix, 0.5,-0.5, 0.866,);/* Opera */} Try twice. CSS3 3D conversion 3D transformation uses the same attributes based on 2D transformation. If you are familiar with 2D transformation, you find that the 3D deformation function is similar to the 2D transformation function. 3D transformation in CSS3 mainly includes the following functions: 3D displacement: 3D displacement in CSS3 mainly includes translateZ () and translate3d () functions; 3D Rotation: 3D Rotation in CSS3 mainly includes four functions: rotateX (), rotateY (), rotateZ (), and rotate3d (). 3D Scaling: 3D scaling in CSS3 mainly includes scaleZ () and scale3d (). 3D matrix: In CSS3, 3D deformation is the same as 2D deformation. There is also a 3D Matrix Function matrix3d (). 1.3D displacement in CSS3 3D displacement mainly includes two types of functions: translateZ () and translate3d (). The translate3d () function allows an element to move in a 3D space. This deformation is characterized by the use of three-dimensional vector coordinates to define the number of elements moving in each direction. With the increase of px, the intuitive effect is as follows: X: moving from left to right Y: moving from top to bottom Z: Taking the center of the box as the origin, increasing the size of x1y1z1 can be seen from the effect, when the value of the Z axis is larger, the element is closer to the viewer, And the element is larger in the visual sense. On the contrary, the smaller the value is, the farther the element is from the viewer and the smaller the visual element. Example:

.stage {    width: 300px;    height: 300px;    float: left;    margin: 15px;    position: relative;    background: url(http://www.w3cplus.com/sites/default/files/blogs/2013/1311/bg.jpg) repeat center center;    -webkit-perspective: 1200px;    -moz-perspective: 1200px;    -ms-perspective: 1200px;    -o-perspective: 1200px;    perspective: 1200px;}.container {    position: absolute;    top: 50%;    left: 50%;    -webkit-transform-style: preserve-3d;    -moz-transform-style: preserve-3d;    -ms-transform-style: preserve-3d;    -o-transform-style: preserve-3d;    transform-style: preserve-3d;}.container img {    position: absolute;    margin-left: -35px;    margin-top: -50px; }.container img:nth-child(1){    z-index: 1;    opacity: .6;}.s1 img:nth-child(2){    z-index: 2;     -webkit-transform: translate3d(30px,30px,200px);    -moz-transform: translate3d(30px,30px,200px);    -ms-transform: translate3d(30px,30px,200px);    -o-transform: translate3d(30px,30px,200px);    transform: translate3d(30px,30px,200px);}