10 days proficient in CSS3 (8)

Deformation--rotating rotate ()

The rotate rotate () function rotates the element relative to the origin by specifying the angle parameter. It operates mainly in two-dimensional space, setting an angle value to specify the amplitude of the rotation. If the value is positive , the element rotates clockwise from the center of the origin, and if the value is negative , the element is rotated counterclockwise from the center of the origin point. As shown in the following:

HTML code:

<div class= "wrapper" >  <div></div></div>

CSS code:

. wrapper {  width:200px;  height:200px;  border:1px dotted red;  margin:100px Auto;}. Wrapper div {  width:200px;  height:200px;  Background:orange;  -webkit-transform:rotate (45deg);  Transform:rotate (45deg);}

Demo results

Warp-twisted skew ()

The twisted skew () function allows the element to be tilted to display . It tilts an object at a certain angle around the x -and y-axes in its center position. This differs from the rotation of the rotate () function, where the rotate () function simply rotates without altering the shape of the element. The skew () function does not rotate, but only changes the shape of the element.

Skew () has three cases:

1. Skew (x, y) distorts the elements in both horizontal and vertical direction (x-axis and y-axis simultaneously distort by a certain angle value);

The first parameter corresponds to the x-axis, and the second parameter corresponds to the y-axis. If the second parameter is not provided, the value is 0, which means there is no miter in the y-axis direction.

2. SKEWX (x) only distorts the element in the horizontal direction (distortion of the x-axis);

3. skewy (y) only distorts the element in the vertical direction (Y-axis warp distortion)

Sample Demo:

The rectangle is converted to parallelogram through the skew () function.

HTML code:

<div class= "wrapper" >  <div> I become a flat quadrilateral </div></div>

CSS code:

. wrapper {  width:300px;  height:100px;  border:2px dotted red;  margin:30px Auto;}. Wrapper div {  width:300px;  height:100px;  line-height:100px;  Text-align:center;  Color: #fff;  Background:orange;  -webkit-transform:skew (45deg);  -moz-transform:skew (45deg)  Transform:skew (45deg);}

Demo results

Warp-scaling scale ()

The zoom scale () function allows the element to scale the object based on the center Origin point.

Scaling scale has three scenarios:

1, scale (x, y) scales the element horizontally and vertically (i.e., the X-axis and Y-axis are scaled simultaneously)

For example:

Div:hover {  -webkit-transform:scale (1.5,0.5); -moz-transform:scale (1.5,0.5)  Transform:scale (1.5,0.5);}

Note: Y is an optional parameter, and if you do not set the Y value, the zoom multiplier for x, y two directions is the same.

2, ScaleX (x) elements are only scaled horizontally (x-axis scaling)

3, ScaleY (y) elements are only scaled vertically (Y-axis scaling)

HTML code:

<div class= "wrapper" >  <div> I'll zoom in 1.5 times times </div></div>

CSS code:

. wrapper {  width:200px;  height:200px;  border:2px dashed red;  margin:100px Auto;}. Wrapper div {  width:200px;  height:200px;  line-height:200px;  Background:orange;  Text-align:center;  Color: #fff;}. Wrapper Div:hover {  opacity:. 5;  -webkit-transform:scale (1.5); -moz-transform:scale (1.5)  Transform:scale (1.5);}

Demo results

Note: The value of scale () defaults to 1, and the value is set to anything between 0.01 to 0.99 , which makes one element smaller, and any value greater than or equal to 1.01 . The effect is to enlarge the element.

Deformation--displacement translate ()

The translate () function moves the element in the specified direction, similar to relativein position. Or, in a simple sense, using the translate () function, you can move an element from its original position without affecting any Web components on the x, Y axis.

Translate we are divided into three different situations:

1. Translate (x, y) moving horizontally and vertically (i.e. simultaneous movement of the y axis and axis)

2, TranslateX (x) only move horizontally (x-axis movement)

3, Translatey (y) only move vertically (Y-axis movement)

Example Demo: move an element to the right of the y-axis by moving it 100px through the translate () function to the right of the 50px,x axis.

HTML code:

<div class= "wrapper" >  <div> I move right down </div></div>

CSS code:

. wrapper {  width:200px;  height:200px;  border:2px dotted red;  margin:20px Auto;}. Wrapper div {  width:200px;  height:200px;  line-height:200px;  Text-align:center;  Background:orange;  Color: #fff;  -webkit-transform:translate (50px,100px); -moz-transform:translate (50px,100px);  Transform:translate (50px,100px);}

Demo results

Variants-matrix matrices ()

matrix () is a six-value (A,B,C,D,E,F) transformation matrix that specifies a 2D transformation that is equivalent to applying a [a B c D E F] transformation matrix directly. is to reposition the element based on the horizontal (x-axis) and vertical (Y-axis), this property value uses a matrix that involves mathematics, and I'm just saying here that the transform in CSS3 has such a property value, and if you need to understand it, you need to have some knowledge of the math matrix.

Example Demo: simulates the effect of translate () displacement in transform with the matrix () function.
HTML code:

<div class= "wrapper" >  <div></div></div>

CSS code:

. wrapper {  width:300px;  height:200px;  border:2px dotted red;  margin:40px Auto;}. Wrapper div {  width:300px;  height:200px;  Background:orange;  -webkit-transform:matrix (1,0,0,1,50,50);  -moz-transform:matrix (1,0,0,1,50,50);  Transform:matrix (1,0,0,1,50,50);}

Demo Result:

Deformation-Origin Point Transform-origin

Any element has a center point, and by default its center point is 50% of the element's x-axis and y-axis. As shown in the following:

The rotation, displacement, scaling, and twisting of CSS transformations are distorted by the element's own center position without resetting the transform-origin to change the position of the element origin. But many times, we can change the origin of the element by Transform-origin, so that the element origin is not in the center of the element, so as to achieve the desired origin position.

The Transform-origin value is similar to the background-position value in the element settings background, as shown in the following table:

Examples show:

Change the origin of the element to the upper-left corner by Transform-origin, and then rotate 45 degrees in the clockwise order.

HTML code:

<div class= "wrapper" >  <div> Origin at default location </div></div><div class= "wrapper Transform-origin ">  <div> Origin Reset to upper left corner </div></div>

CSS code:

. wrapper {  width:300px;  height:300px;  Float:left;  margin:100px;  border:2px dotted red;  line-height:300px;  Text-align:center;}. Wrapper div {  background:orange;  -webkit-transform:rotate (45deg);  Transform:rotate (45deg);}. Transform-origin Div {  -webkit-transform-origin:left top;  Transform-origin:left top;}

Demo Result:

Animation--Transition Properties Transition-property

Early in the web to achieve animation effect, are dependent on JavaScript or flash to complete. However, a new module transition has been added to the CSS3, which can be used to trigger the appearance change of elements through some simple CSS events, making the effect appear more delicate. Simply put, it is triggered by clicking on the mouse, getting focus, being clicked or any changes to the element, and smoothing the CSS's property values with an animated effect.

Creating a simple transition in CSS can be accomplished in the following steps: First, declare the initial state style of the element in the default style, and second, declare the final state style of the transition element, such as the levitation state, and thirdly, add some different styles by adding a transition function in the default style.

CSS3 's over-transition property is a composite property that mainly includes the following sub-properties:

• Transition-property: Specifying CSS properties for staging or dynamic impersonation

• Transition-duration: Specify the time required to complete the transition

• Transition-timing-function: Specifying a transition function

• Transition-delay: Specify the delay time to start appearing

First look at the Transition-property property

The transition-property is used to specify the CSS property name of the transition animation , which only has a property with a midpoint value (the property that needs to animate) to have a transition effect. The corresponding CSS properties that have transitions include:

Html:

<div></div>

Css:

div {  width:200px;  height:200px;  background-color:red;  margin:20px Auto;  -webkit-transition:background-color. 5s ease. 1s;  Transition:background-color. 5s ease. 1s;} div:hover {  background-color:orange;}

Demo Result:

Mouse Move in

Mouse move out

Special Note : When the "Transition-property" property is set to all, the attribute for all midpoint values is represented.

Use a simple example to illustrate the problem:

Suppose your initial state sets the style "width", "height", "background", and when you change these three properties in the final state, then all represents " width", "height" and "background". If your final state changes only "width" and "height", then all stands for " width" and "height".

Animation-time required for the transition transition-duration

The transition-duration property is primarily used to set the time it takes for a property to transition to another property, that is, the length of time it takes to transition from the old property to the new attribute, commonly known as duration .

Case Demo:

In the mouse hover (hover) state, let the container slowly transition from right angle to rounded corners, and let the entire animation continue to 0.5s.

Html:

<div></div>

Css:

div {  width:300px;  height:200px;  Background-color:orange;  margin:20px Auto;  -webkit-transition-property:-webkit-border-radius;  Transition-property:border-radius;  -webkit-transition-duration:. 5s;  Transition-duration:. 5s;  -webkit-transition-timing-function:ease-out;  Transition-timing-function:ease-out;  -webkit-transition-delay:. 2s;  Transition-delay:. 2s;} div:hover {  border-radius:20px;}

Demo Result:

Mouse Move in

Mouse move out

Animation--Transition function transition-timing-function

The Transition-timing-function property refers to the "easing function" of the transition. It is used primarily to specify the transition speed of the browser and the progress of the operation during the transition, including the following functions:

(Click the picture to enlarge)

Case Show:

In the hover state, let the container slowly transition from a square to a circle, and the whole transition is accelerated and then slowed down, that is, the use of ease-in-out function.

HTML code:

<div></div>

CSS code:

div {  width:200px;  height:200px;  background:red;  margin:20px Auto;  -webkit-transition-property:-webkit-border-radius;  Transition-property:border-radius;  -webkit-transition-duration:. 5s;  Transition-duration:. 5s;  -webkit-transition-timing-function:ease-in-out;  Transition-timing-function:ease-in-out;  -webkit-transition-delay:. 2s;  Transition-delay:. 2s;} div:hover {  border-radius:100%;}

Demo results

Mouse move in:

Mouse move out:

Animation--Transition delay time Transition-delay

The Transition-delay property is very similar to the Transition-duration property , and the difference is that transition-duration is used to set the duration of the transition animation, Transition-delay is used primarily to specify the time at which an animation starts executing , that is, how long it takes to start executing after changing the attribute value of the element.

Sometimes when we want to change the transition effect of two or more CSS properties, just string together a few transition declarations, separate them with commas (","), and each can have their own different continuation times . And the rate of its time transformation mode . But there is a point to note: The first time value is Transition-duration, the second is transition-delay.

For example:a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}

Sample Demo:

A 200px *200px orange container is passed through the transition property, transitioning to a 300px * 300px red container while hovering over the mouse. And the entire transition is triggered after 0.1s, and the entire transition lasts 0.28s.

HTML code:

<div class= "wrapper" >  <div> Mouse on my body </div></div>

CSS code:

. wrapper {  width:400px;  height:400px;  margin:20px Auto;  border:2px dotted red;}. Wrapper div {  width:200px;  height:200px;  Background-color:orange;  -webkit-transition:all. 28s ease-in. 1s;  Transition:all. 28s ease-in. 1s;}. Wrapper Div:hover {  width:300px;  height:300px;  background-color:red;}

Demo results

Mouse move in:

Mouse move out:

10 days proficient in CSS3 (8)