Rumah > Artikel > hujung hadapan web > Apakah atribut yang digunakan untuk mencapai kesan putaran dalam css3
Apakah atribut yang digunakan untuk mencapai kesan putaran dalam css3
- 青灯夜游asal
- 2021-12-14 17:38:282391semak imbas
Atribut yang mencapai kesan putaran dalam css3 ialah "transform". Atribut transformasi digunakan untuk menggunakan transformasi 2D atau 3D pada elemen Putaran boleh dicapai apabila digunakan dengan fungsi rotate(), rotate3d(), rotateX(), rotateY() atau rotateZ().
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.
Atribut yang mencapai kesan putaran dalam css3 ialah "transform".
Atribut transformasi digunakan untuk menggunakan transformasi 2D atau 3D pada elemen Apabila atribut ini digunakan dengan fungsi berikut, putaran elemen boleh dicapai:
- .
putar(sudut ) Tentukan putaran 2D dan nyatakan sudut dalam parameter.
putar3d(x,y,z,sudut) Takrifkan putaran 3D.
rotateX(angle) Mentakrifkan putaran 3D di sepanjang paksi X.
putarY(sudut) Mentakrifkan putaran 3D di sepanjang paksi Y.
putarZ(sudut) Mentakrifkan putaran 3D di sepanjang paksi Z.
Contoh 1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div
{
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello</div>
</body>
</html>
Contoh 2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
*,
*:after,
*:before {
box-sizing: border-box;
}
body {
background: #F5F3F4;
margin: 0;
padding: 10px;
font-family: 'Open Sans', sans-serif;
text-align: center;
}
h1 {
color: #4c4c4c;
font-weight: 600;
border-bottom: 1px solid #ccc;
}
h2,
h4 {
font-weight: 400;
color: #4d4d4d;
}
.card {
display: inline-block;
margin: 10px;
background: #fff;
padding: 15px;
min-width: 200px;
box-shadow: 0 3px 5px #ddd;
color: #555;
}
.card .box {
width: 100px;
height: 100px;
margin: auto;
background: #ddd;
cursor: pointer;
box-shadow: 0 0 5px #ccc inset;
}
.card .box .fill {
width: 100px;
height: 100px;
position: relative;
background: #03A9F4;
opacity: .5;
box-shadow: 0 0 5px #ccc;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.card p {
margin: 25px 0 0;
}
.rotate:hover .fill {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.rotateX:hover .fill {
-webkit-transform: rotateX(45deg);
transform: rotateX(45deg);
}
.rotateY:hover .fill {
-webkit-transform: rotateY(45deg);
transform: rotateY(45deg);
}
.rotateZ:hover .fill {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.scale:hover .fill {
-webkit-transform: scale(2, 2);
transform: scale(2, 2);
}
.scaleX:hover .fill {
-webkit-transform: scaleX(2);
transform: scaleX(2);
}
.scaleY:hover .fill {
-webkit-transform: scaleY(2);
transform: scaleY(2);
}
</style>
</head>
<body>
<h1>CSS3 元素旋转</h1>
<!-- Rotate-->
<div class="card">
<div class="box rotate">
<div class="fill"></div>
</div>
<p>rotate(45deg) </p>
</div>
<div class="card">
<div class="box rotateX">
<div class="fill"></div>
</div>
<p>rotateX(45deg)</p>
</div>
<div class="card">
<div class="box rotateY">
<div class="fill"></div>
</div>
<p>rotateY(45deg)</p>
</div>
<div class="card">
<div class="box rotateZ">
<div class="fill"></div>
</div>
<p>rotateZ(45deg) </p>
</div>
</body>
</html>
(Belajar perkongsian video: tutorial video css)
Atas ialah kandungan terperinci Apakah atribut yang digunakan untuk mencapai kesan putaran dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!