We know that with the help of the powerful special effects feature of CSS3, the blending mode can make the picture have a stunning effect, and the blending mode refers to the various modes used to incorporate the upper image into the underlying image, let's look at the case
First, Transform-origin
The origin of the CSS warp, which is the center point of the object by default. Transform-origin accepts two parameters, they can be a percentage, EM, PX and other specific values, can also be left, right, center, top, middle, bottom and other keywords.
For example:
Transform-origin:top right;-o-transform-origin:top right;-moz-transform-origin:top Right;-webkit-transform-origin : Top right;
transform-origin:0 0;-o-transform-origin:0 0;-moz-transform-origin:0 0;-webkit-transform-origin:0 0;
transform-origin:0 100%;-o-transform-origin:0 100%;-moz-transform-origin:0 100%;-webkit-transform-origin:0 100%;
transform-origin:50% 100%;-o-transform-origin:50% 100%;-moz-transform-origin:50% 100%;-webkit-transform-origin:50 % 100%;
Ii. transition--Transition
1.transition-property: Defines the name of the CSS property that transforms the animation. It could be none|all|. A list of CSS properties.
For example:
Transition-property:background-color;-o-transition-property:background-color;-moz-transition-property: Background-color;-webkit-transition-property:background-color;
2.transition-duration: Defines the length of time to convert animations.
For example:
transition-duration:3s;-o-transition-duration:3s;-moz-transition-duration:3s;-webkit-transition-duration:3s;
3.transition-delay: Defines the delay time for transition animations.
For example:
transition-delay:3s;-o-transition-delay:3s;-moz-transition-delay:3s;-webkit-transition-delay:3s;
4.transition-timing-function: Defines the effect of converting animations.
The values can be:
Ease: mitigation effect.
Ease-in: Fade effect.
Ease-out: Fade effect.
Ease-in-out: Fade fade effect.
Linear: linear effect.
Cubic-bezier: Special cubic Bezier curve effect. Cubic-bezier (0.3, 0, 0.5, 1.0).
For example:
Transition-timing-function:linear; -o-transition-timing-function:linear;-moz-transition-timing-function:linear;-webkit-transition-timing-function : linear;
Third, animation
1.animation-name: Animated name.
2.animation-duration: Animation time.
3.animation-timing-function: How to play the animation.
4.animation-delay: The animation starts playing time.
5.animation-iteration-count: Number of plays. Infinite represents an infinite number of times.
6.animation-direction: The direction in which the animation plays. Each cycle of the normal--animation forwards alternate--The first odd number of times, odd times backwards.
For example:
div {
-webkit-transform-style:preserve-3d;-webkit-animation-name:ani;-webkit-animation-duration:10s;- Webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;} /* Below call animation */@-webkit-keyframes ani {0% {-webkit-transform:rotatex (0deg);} 25% {-webkit-transform:rotatex (180deg);} 50% {-webkit-transform:rotatex (360deg);} 75% {-webkit-transform:rotatey (180deg);} 100% {-webkit-transform:rotatey (360deg);}
Believe that you have seen these cases you have mastered the method, more wonderful please pay attention to the PHP Chinese network other related articles!
Related reading:
Tutorial on using Transform properties in CSS3
CSS3 a detailed description of the Translate property
Several ways to locate in the front-end project