Rumah >hujung hadapan web >tutorial css >Paksi yang manakah putaran css3 berputar?
Paksi yang manakah putaran css3 berputar?
- WBOYasal
- 2021-12-16 17:38:583402semak imbas
Terdapat banyak situasi putaran dalam css3: 1. Putaran yang direalisasikan oleh fungsi "rotateX()" adalah di sekeliling paksi X; 2. Putaran yang direalisasikan oleh fungsi "rotateY()" adalah di sekeliling Paksi Y; 3. fungsi "rotateZ" ()" merealisasikan putaran mengelilingi paksi Z; 4. fungsi "putar ()" merealisasikan putaran di sekeliling asal.
Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.
Paksi yang manakah putaran css3 di sekeliling
Dalam css, putaran boleh mengikut arah jam, lawan jam atau sekitar putaran paksi Y atau Z, gaya putaran yang berbeza sepadan dengan fungsi yang berbeza.
1. Fungsi "putar()"
Gunakan fungsi "putar()" untuk memutar elemen mengikut arah jam atau lawan jam.
Contohnya adalah seperti berikut:
<html>
<head>
<style>
div
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(9deg);
-ms-transform:rotate(9deg); /* Internet Explorer */
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg); /* Opera */
}
</style>
</head>
<body>
<div>Hello World</div>
</body>
</html>Hasil keluaran:
fungsi "rotateX()".
Gunakan fungsi "rotateX()" untuk memutarkan elemen di sekeliling paksi X. Contohnya adalah seperti berikut:
<html>
<head>
<style>
img{
transform:rotatex(180deg);
}
</style>
</head>
<body>
<img src="1118.02.png" alt="">
</body>
</html>Hasil keluaran:
fungsi "rotateY()"
Gunakan fungsi "rotateY()" untuk memutarkan elemen di sekeliling paksi Y Contohnya adalah seperti berikut:
<html>
<head>
<style>
img{
transform:rotateY(180deg);
}
</style>
</head>
<body>
<img src="1118.02.png" alt="">
</body>
</html>Hasil keluaran:
4 , fungsi "rotateZ()"
Gunakan fungsi "rotateZ()" untuk memutarkan elemen di sekeliling paksi Z. Contohnya adalah seperti berikut:
<html>
<head>
<style>
img{
transform:rotateZ(180deg);
}
</style>
</head>
<body>
<img src="1118.02.png" alt="">
</body>
</html>Hasil output:
(Belajar perkongsian video: tutorial video css)
Atas ialah kandungan terperinci Paksi yang manakah putaran css3 berputar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!