Examples of this paper, we give a brief transform common application, that is, when we slide icon with the mouse button, the icon will automatically rotate a week, this effect does not rely JS, css3 of the transform can be completed.
Transform Introduction
In CSS3 transform include the following: a rotating rotate, distort skew, scale and move the zoom and translate matrix deformation matrix.
1, the rotation rotate (): by specifying parameters on the angle of the original elements of a 2D rotation (2D rotation), angle refers to the angle of rotation, if the setting is a positive number represents clockwise rotation, a negative number indicates counterclockwise rotation. Such as: transform: rotate (30deg).
2, twisted skew ([,]): skew X-axis Y-axis transformation (miter conversion). The first parameter corresponds to the X-axis, Y-axis corresponds to the second parameter. If the second argument is not provided, the value is 0, that is, no miter on the Y-axis direction. skew is used to distort the line elements, the first parameter is the twist angle in the horizontal direction, and the second parameter is the twist angle in the vertical direction. Wherein the second parameter is optional and defaults to 0deg.
3, Zoom scale ([,]): provides instructions for performing [sx, sy] scaling vector two parameters specify a 2D scale (2D scaling). If the second argument is not provided, then take the same value as the first parameter. scale (X, Y) is used for the element to zoom, you can transform-origin to point set of elements, elements of the same point in a central location; group X represents a multiple of horizontal scaling, Y represents the vertical zoom ratio and Y is an optional parameter, if the Y value is not set, then zoom ratio X, Y is the same in both directions. And X prevail. Such as: transform: scale (2,1.5).
4, the mobile translate ([,]): specified by the vector [tx, ty] a 2D translation, tx is the first transition parameter, ty is the second transition parameter options. If it is not provided, ty 0 as its value. That is translate (x, y), which represents an object pan, according to the set x, y parameter value, when value is negative, the opposite direction of moving objects, which defaults to the element center point can also be based transform-origin changes basis points. Such as transform: translate (100px, 20px).
5, matrix deformation matrix (,,,,,): in the form of a six-containing values (a, b, c, d, e, f) specifies a 2D transformation matrix transformation, the equivalent of a direct application of [abcdef] conversion matrix. Is based on the horizontal direction (X axis) and vertical (Y-axis) repositioning elements, this attribute value relates to the use of a matrix mathematics.
Example: rotation icon
To rotate the icon, just use the rotate transform and transition animation effect to complete rotation. In this case, we are ready to two pictures as a background image when the mouse slide icon, icons do 360 degree rotation motion, html structure is as follows:
<ul class="icos">
<li class="female"><a href="#"><i></i>Female</a></li>
<li class="arrow"><a href="#"><i></i>Arrow</a></li>
</ul>Use CSS3 to complete the connection with the following icons rotation effect.
ul { width: 145px; margin: 0 auto; list-style: none; font-size: 30px; }
li{padding:10px }
li a{width:145px;height:42px;line-height:36px;display:block;color:#333}
li a:hover{text-decoration:none}
li a i { background: url(icon.png) no-repeat; display: block; width: 42px; height: 32px; position: relative; z-index: 10; float:left;
-webkit-transition: -webkit-transform 0.4s ease-out;
-moz-transition: -moz-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
}
li a:hover i {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
li.female a i { background-position: 0 0; }
li.arrow a i { background-position: 0 -50px; }
