Detailed introduction to transform in CSS3

Recently, the development speed of HTML5 and CSS3 is still very impressive. There are many big and cool websites at home and abroad using the latest technology. In the face of new technologies, how should we correctly grasp and use them in future actual projects? In response to this problem, Haozi decided to analyze CSS3 and explain to the students one by one what a magical thing CSS3 is. Let’s just transform start. If you don’t write well, please give it a try! !

What is CSS3 transform?

The meaning of transform is: change, deform...; transform

What are the common properties of CSS3 transform?

The properties of transform include: rotate() / skew() / scale() / translate(,), which are divided into x and y respectively, such as: rotatex() and rotatey(), and so on. .

Let’s break down the usage of each attribute:

transform:rotate():

Meaning: rotation; where "deg" means "degree", such as " "10deg" means "10 degrees", the same below.

.
demo_transform1
{
-webkit-transform
:
rotate
(10deg
)
;
-moz-transform
:
rotate
(10deg
)
}

Copy after login

.
demo_transform2
{
-webkit-transform
:
skew
(20deg
)
;
-moz-transform
:
skew
(20deg
)
}

##transform:scale():

Meaning: scale; "1.5" means enlarging at a ratio of 1.5. If you want to enlarge by 2 times, you must write "2.0", and if you want to zoom out, it is negative "-".

.
demo_transform3
{
-webkit-transform
:
scale
(1
.
5
)
;
-moz-transform
:
scale
(1
.
5
)
}

transform:translate()：

含义：变动，位移；如下表示向右位移120像素，如果向上位移，把后面的“0”改个值就行，向左向下位移则为负“-”。

.
demo_transform4
{
-webkit-transform
:
translate
(120px
,
0
)
;
-moz-transform
:
translate
(120px
,
0
)
}

Copy after login

transform综合：

transform的常用属性就是这些了，下面我们借助transition的帮忙来演示一个关于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
)
}

Copy after login

The above is the detailed content of Detailed introduction to transform in CSS3. For more information, please follow other related articles on the PHP Chinese website!