Introduction détaillée pour transformer en CSS3

Récemment, la vitesse de développement de HTML5 et CSS3 est encore très impressionnante. Il existe de nombreux sites Web importants et sympas dans le pays et à l'étranger qui utilisent les dernières technologies. Face aux nouvelles technologies, comment les appréhender et les utiliser correctement dans les futurs projets concrets ? En réponse à ce problème, Haozi a décidé d'analyser CSS3 et d'expliquer aux étudiants un par un à quel point CSS3 est magique. transformez-vous et commencez. Si vous n'écrivez pas bien, essayez-le ! !

Qu'est-ce que la transformation CSS3 ?

transformer signifie : changer, déformer...; transformer

Quelles sont les propriétés communes de la transformation CSS3 ?

Les attributs de transform incluent : rotate() / skew() / scale() / translation(,), qui sont divisés respectivement en x et y, tels que : rotatex() et rotatey(), et bientôt. .

Décomposons l'utilisation de chaque attribut :

transform:rotate() :

Signification : rotation où "deg" signifie "degré", tel que " " 10deg" signifie "10 degrés", comme ci-dessous.

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

transform:skew() :

Signification : inclinaison ; Signification : Proportion ; "1,5" signifie un agrandissement à un rapport de 1,5. Si vous souhaitez agrandir 2 fois, vous devez écrire "2,0", et si vous souhaitez effectuer un zoom arrière, il s'agit d'un "-" négatif.

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

transform:translate()：

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

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

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
)
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!