Did a demo. With some CSS3 animation, or not very skilled, summed up a bit.
1,-webkit-font-smoothing:antialiased;
-webkit-font-smoothing: none: No anti-aliasing-webkit-font-smoothing: subpixel-antialiased | default: Sub-pixel smoothing-webkit-font-smoothing: antialiased: Grayscale Smoothing
2, -webkit-perspective:800px; Set the view where the element is viewed: value: The distance of the element from the view, measured in pixels. Make the child element 3d effect: <! DOCTYPE html> None No properties get a transition effect. All All properties will have a transition effect.
Property Defines a list of CSS property names to which the transition effect is applied, separated by commas. Transition effect:
| Linear |
Specifies the transition effect (equal to Cubic-bezier (0,0,1,1)) that starts at the same speed to the end. |
| Ease |
A transition effect (Cubic-bezier (0.25,0.1,0.25,1)) that specifies a slow start and then a slow end. |
| Ease-in |
Specifies a transition effect that starts at a slow speed (equals Cubic-bezier (0.42,0,1,1)). |
| Ease-out |
Specifies a transition effect that ends at a slow speed (equals Cubic-bezier (0,0,0.58,1)). |
| Ease-in-out |
Specifies a transition effect (equal to Cubic-bezier (0.42,0,0.58,1)) that starts and ends at a slow speed. |
| Cubic-bezier (n,n,n,n) |
In |
4.-webkit-transform-style:preserve-3d;
2D Transform Method
- Vt. To make a change of. to transform;
One, transform to the element application 2d or 3d conversion (1) 2d:
Transform
- The Transform property can be used for inline (inline) and block-level (block) elements. It allows us to rotate, scale, and move elements, and he has several attribute value parameters:
- Rotate (rotation) allows you to rotate an object by passing a degree value;
- Scale is a scaling feature that allows any element to become larger. It uses one or two positive and negative numbers as well as decimals as parameters, and when a parameter is used, the x-axis and the y-axis are scaled the same;
- Translate is the repositioning of elements based on the x and Y coordinates, which represent the same parameters for the x and Y axes when using one parameter;
- skew tilt (oblique cut in PS), parameter is degree, when using one parameter, the x-axis and y-axis parameters are the same;
- matrix transformation, which is to reposition elements based on the x and Y coordinates, uses 6 parameters
Transform-origin allows you to change the position of the element being converted
| JavaScript Syntax: |
object. style.transformorigin= "20% 40%" |
Second, change the element base point Transform-origin
- Transform-origin is the origin of the deformation, that is, the element around the point of deformation or rotation, the property only when the Transform property is set to play a role;
- Because the default base point of our element is its central location , in other words, we do not use Transform-origin to change the position of the element base point, transform the Rotate,translate,scale,skew, The matrix and other operations are changed in the central position of the element itself .
- But sometimes we need to perform these operations on elements in different locations, so we can use Transform-origin to change the base point position of the element so that the element base point is not in the central position to reach the base point you need.
- Let's look at its usage rules:
Transform-origin (x, y): the base point (reference point) used to set the motion of the element. The default point is the center point of the element. where x and Y values can be a percent, em,px, where X can also be a character parameter value left,center,right;Y and X can also set a character value in addition to a percent score top,center , Bottom .
-
- Syntax:-moz-transform-origin: [| | Left | Center | Right [| | Top | Center | Bottom]?
- Transform-origin accepts two parameters, they can be percentages, em,px and other specific values, or it can be left,center,right, or top,center,bottom and other descriptive parameters;
- Top Left | Left top is equivalent to 0 0;
- Top | Top Center | Center top equivalent to 50% 0
- Right Top | Top right is equivalent to 100% 0
- Left | Left Center | Center left equivalent to 0 50%
- Center | Center Center is equivalent to 50% 50% (default value)
- Right | Right Center | Center right is equivalent to 100% 50%
- Bottom Left | Left bottom equivalent to 0 100%
- Bottom | Bottom Center | Center bottom equivalent to 50% 100%
- Bottom Right | Right bottom equivalent to 100% 100%
whichLeft,center Right is the horizontal direction value, corresponding to the score of left=0%;center=50%;right=100%andThe top center bottom is the vertical value, where top=0%;center=50%;bottom=100%;Iftakes only one value, indicating that the vertical direction value is unchanged。Note:Transform-origin is not a property value in transform, he has his own syntax. but he has to combine transform to work .
third, CSS3 Transform-style properties
|
Specifies how nested elements are displayed in 3D space. |
Specifies how nested elements are displayed in 3D space.
4. Perspective Properties
|
Specifies the perspective effect of the 3D element. |
5. The Perspective-originperspective-origin property defines the X-and Y-axes on which the 3D element is based. This property allows you to change the bottom position of the 3D element. When you define a Perspective-origin property for an element, its child elements get a perspective instead of the element itself. Note: This property must be used with the perspective property and affects only the 3D conversion element.
6. Backface-visibility PropertiesThe Backface-visibility property defines whether the element is visible when it is not facing the screen. 1, animation @keyframes and then use animation: the first parameter on the line @keyframes defined parameters
animation:[<animation-name> | | <animation-duration> | | <animation-timing-function> | | < animation-delay> | | <animation-iteration-count> | | <animation-direction>] [, [<animation-name> | | <animation-duration> | | < animation-timing-function> | | <animation-delay> | | <animation-iteration-count> | | <animation-direction>]]*
CSS3 Conversion Transfrom Transition Transition and two x @
