What is CSS3 transform?
The meaning of transform is: change, make ... Deformation n. a transformation;
What are the common properties of CSS3 transform?
Transform properties include: rotate ()/skew ()/scale ()/translate (,), with X and Y points, such as: Rotatex () and Rotatey (), etc.
1, the speed curve of the transition effect is controlled by using speed control function (acceleration, deceleration, etc.)
The speed curve of the transition effect can be set by using the speed regulation function, thus achieving the transition effect changing its speed over time. For example: Start very slowly and then accelerate or start quickly and then slow down.
(1) CSS3 defines the following speed-regulating functions:
Linear the transition effect (equal to Cubic-bezier (0,0,1,1)) that starts at the same speed to the end.
Ease the Transition effect (Cubic-bezier (0.25,0.1,0.25,1)) that starts slowly and then gets faster and then ends slowly.
Ease-in a transition effect that starts at a slow rate (equal to Cubic-bezier (0.42,0,1,1)).
Ease-out a transition effect that ends at a slow rate (equal to Cubic-bezier (0,0,0.58,1)).
Ease-in-out a transition effect that sets a slow start and end (equal to Cubic-bezier (0.42,0,0.58,1)).
Cubic-bezier (n,n,n,n) defines its own value in the Cubic-bezier function. The possible values are the values between 0 and 1.
(2) The use of speed regulating function
When used, you only need to keep the speed function behind the time parameter of the Transition property. Use default speed regulating function if not filled (ease)
1
Transition:opacity 10s ease-in-out;
(3) Use Sample 1:
The following example demonstrates the difference in the effect of various speed regulating functions. The mouse moves into the box, the box inside the box will move to the right, while the square will rotate, the corner becomes rounded, the background color and the text colour are also changing. Changes in these styles will have a transition effect, and due to the use of different speed regulating functions, the speed of the transition is also different.
<!doctype html>
<title>hangge.com</title>
<style>
. trans_box {
padding:20px;
Background-color: #f0f3f9;
*zoom:1;
}
. trans_list {
width:10%;
height:64px;
margin:10px 0;
Background-color: #2D9900;
Color: #fff;
Text-align:center;
}
. Linear {
-webkit-transition:all 4s linear;
-moz-transition:all 4s linear;
-o-transition:all 4s linear;
Transition:all 4s linear;
}
. Ease {
-webkit-transition:all 4s ease;
-moz-transition:all 4s ease;
-o-transition:all 4s ease;
Transition:all 4s ease;
}
. ease_in {
-webkit-transition:all 4s ease-in;
-moz-transition:all 4s ease-in;
-o-transition:all 4s ease-in;
Transition:all 4s ease-in;
}
. ease_out {
-webkit-transition:all 4s ease-out;
-moz-transition:all 4s ease-out;
-o-transition:all 4s ease-out;
Transition:all 4s ease-out;
}
. ease_in_out {
-webkit-transition:all 4s ease-in-out;
-moz-transition:all 4s ease-in-out;
-o-transition:all 4s ease-in-out;
Transition:all 4s ease-in-out;
}
. trans_box:hover. trans_list. Trans_box_hover. trans_list {
margin-left:89%;
Background-color: #beceeb;
Color: #333;
-webkit-border-radius:25px;
-moz-border-radius:25px;
-o-border-radius:25px;
border-radius:25px;
-webkit-transform:rotate (360DEG);
-moz-transform:rotate (360DEG);
-o-transform:rotate (360DEG);
Transform:rotate (360DEG);
}
</style>
<div id= "Transbox" class= "Trans_box" >
<div class= "Trans_list Ease" >ease<br> (default) </div>
<div class= "Trans_list ease_in" >ease-in</div>
<div class= "Trans_list ease_out" >ease-out</div>
<div class= "Trans_list ease_in_out" >ease-in-out</div>
<div class= "Trans_list linear" >linear</div>
</div>
(4) Use Sample 2:
The following shows the difference in the effect of different speed regulating functions by changing the width of the bar chart.
<! DOCTYPE html>
<style>
Div
{
margin:10px 0;
width:100px;
height:50px;
Background: #2D9900;
Color:white;
Font-weight:bold;
Transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 * *
-webkit-transition:width 2s; * Safari and Chrome * *
-o-transition:width 2s; /* Opera * *
}
#div1 {transition-timing-function:linear;}
#div2 {transition-timing-function:ease;}
#div3 {transition-timing-function:ease-in;}
#div4 {transition-timing-function:ease-out;}
#div5 {transition-timing-function:ease-in-out;}
* Firefox 4: * *
#div1 {-moz-transition-timing-function:linear;}
#div2 {-moz-transition-timing-function:ease;}
#div3 {-moz-transition-timing-function:ease-in;}
#div4 {-moz-transition-timing-function:ease-out;}
#div5 {-moz-transition-timing-function:ease-in-out;}
* Safari and Chrome: * *
#div1 {-webkit-transition-timing-function:linear;}
#div2 {-webkit-transition-timing-function:ease;}
#div3 {-webkit-transition-timing-function:ease-in;}
#div4 {-webkit-transition-timing-function:ease-out;}
#div5 {-webkit-transition-timing-function:ease-in-out;}
/* Opera: * *
#div1 {-o-transition-timing-function:linear;}
#div2 {-o-transition-timing-function:ease;}
#div3 {-o-transition-timing-function:ease-in;}
#div4 {-o-transition-timing-function:ease-out;}
#div5 {-o-transition-timing-function:ease-in-out;}
. Trans_box:hover Div
{
width:500px;
}
</style>
<body>
<div id= "Transbox" class= "Trans_box" >
<div id= "Div2" style= "top:150px" >ease<br> (default) </div>
<div id= "Div3" style= "top:200px" >ease-in</div>
<div id= "Div4" style= "top:250px" >ease-out</div>
<div id= "div5" style= "top:300px" >ease-in-out</div>
<div id= "Div1" style= "top:100px" >linear</div>
</div>
</body>
2, increase the delay for the transition
The Transition property can also add an optional delay to postpone the start of the transition for a period of time. Here is an example of a wait for 1 seconds.
1 seconds delay.
<!doctype html>
<title>hangge.com</title>
<style>
. trans_box3 {
padding:20px;
Background-color: #f0f3f9;
*zoom:1;
}
. Trans_box3 div{
width:100px;
height:50px;
Background: #2D9900;
Color:white;
Font-weight:bold;
-webkit-transition:all 2s ease-out 1s;
-moz-transition:all 2s ease-out 1s;
-o-transition:all 2s ease-out 1s;
transition:all 2s ease-out 1s;
}
. Trans_box3:hover Div
{
width:500px;
}
</style>
<div class= "Trans_box3" >
<div> Delay 1 SEC </div>
</div>
Let's break down the usage of each attribute:
Transform:rotate ():
Meaning: rotation, where "deg" is the meaning of "degree", such as "10deg" means "10 degrees" the same.
. Demo_transform1{-webkit-transform:rotate (10deg);-moz-transform:rotate (10DEG)}
Transform:skew ():
Meaning: Tilt;
. Demo_transform2{-webkit-transform:skew (20deg);-moz-transform:skew (20DEG)}
Transform:scale ():
Meaning: The proportion, "1.5" means to enlarge by 1.5, if you want to enlarge twice times, must be written "2.0", narrowing is negative "-".
. Demo_transform3{-webkit-transform:scale (1.5);-moz-transform:scale (1.5)}
Transform:translate ():
Meaning: change, displacement; The following means 120 pixels to the right, if the upward displacement, the following "0" to change the value of the line, the left downward displacement is negative "-".
. Demo_transform4{-webkit-transform:translate (120px,0);-moz-transform:translate (120px,0)}
Transform synthesis:
The common attributes of transform are these, and here we use transition's help to demonstrate a comprehensive example of CSS3 transform:
. demo_transform5{-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out}
. DEMO_TRANSFORM5: Hover{-webkit-transform:rotate (360deg) skew ( -20deg) scale (3.0) translate (100px,0);-moz-transform:rotate (360DEG) Skew ( -20deg) scale (3.0) translate (100px,0)}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
