Detaillierte Einführung in die Transformation in CSS3

Die Entwicklungsgeschwindigkeit von HTML5 und CSS3 ist in letzter Zeit immer noch sehr beeindruckend. Es gibt viele große und coole Websites im In- und Ausland, die die neueste Technologie verwenden. Wie sollen wir angesichts neuer Technologien diese richtig erfassen und in künftigen konkreten Projekten einsetzen? Als Reaktion auf dieses Problem beschloss Haozi, CSS3 zu analysieren und den Schülern nacheinander zu erklären, was für eine magische Sache CSS3 ist. Einfach transformieren und loslegen. Wenn Sie nicht gut schreiben können, probieren Sie es bitte aus! !

Was ist CSS3-Transformation?

transformieren bedeutet: ändern, verformen...; transformieren

Was sind die gemeinsamen Eigenschaften der CSS3-Transformation?

Zu den Attributen der Transformation gehören: rotieren () / skew () / skalieren () / übersetzen (,), die jeweils in x und y unterteilt sind, z. B. rotierenx () und rotieren () und bald. .

Lassen Sie uns die Verwendung jedes Attributs aufschlüsseln:

transform:rotate():

Bedeutung: Drehung; wobei „deg“ „Grad“ bedeutet, wie zum Beispiel „ „ 10deg bedeutet „10 Grad“, das Gleiche gilt auch unten.

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

Nach dem Login kopieren

transform:skew():

Bedeutung: Neigung; Bedeutung: Proportion; „1,5“ bedeutet eine Vergrößerung um das 2-fache, und wenn Sie verkleinern möchten, ist es negativ „-“.

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

Nach dem Login kopieren

transform:translate()：

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Transformation in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!