Rumah >hujung hadapan web >tutorial css >Kesan fantasi lukisan CSS: mencapai kesan kiub berputar 3D
Kesan fantasi lukisan CSS: mencapai kesan kiub berputar 3D
- 王林asal
- 2023-10-19 08:55:01781semak imbas
kesan fantasi lukisan CSS: mencapai kesan kiub berputar 3D
Dalam pembangunan web, kita sering perlu menggunakan CSS untuk mencapai pelbagai kesan kesan fantasi , dan salah satu kesan yang paling popular ialah kesan kiub berputar 3D. Kita boleh mencapai kesan ini dengan mudah melalui sifat transformasi 3D CSS. Di bawah, saya akan memperkenalkan secara terperinci cara menggunakan CSS untuk melaksanakan kiub berputar 3D dan memberikan contoh kod khusus.
Pertama, kami memerlukan struktur HTML untuk mengehoskan kiub kami. Kodnya adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D旋转立方体</title>
<style>
.container {
width: 200px;
height: 200px;
perspective: 1000px;
perspective-origin: 50% 50%;
margin: 0 auto;
}
.cube-wrapper {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
animation: rotate 5s infinite linear;
}
.face {
width: 200px;
height: 200px;
position: absolute;
background-color: rgba(0, 0, 0, 0.5);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.front {
transform: translateZ(100px);
}
.back {
transform: rotateY(180deg) translateZ(100px);
}
.left {
transform: rotateY(-90deg) translateZ(100px);
}
.right {
transform: rotateY(90deg) translateZ(100px);
}
.top {
transform: rotateX(90deg) translateZ(100px);
}
.bottom {
transform: rotateX(-90deg) translateZ(100px);
}
@keyframes rotate {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<div class="cube-wrapper">
<div class="face front"></div>
<div class="face back"></div>
<div class="face left"></div>
<div class="face right"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>
</div>
</body>
</html>Dalam kod di atas, kami menggunakan sifat transform CSS untuk merealisasikan putaran dan pelarasan kedudukan kubus. Mula-mula, kami mencipta bekas luaran (.container) dan menetapkan sifat perspektif (perspective) dan asal perspektif (perspective-origin >) atribut, kedua-dua atribut ini digunakan untuk mengawal kesan 3D kubus. Kemudian, di dalam bekas, kami mencipta pembalut kiub (.cube-wrapper) dan menetapkan atribut transform-style: preserve-3d;, yang digunakan Untuk mencipta konteks pemaparan 3D baharu supaya elemen dalaman boleh menjalani transformasi 3D. Seterusnya, kami mencipta 6 muka (.face) dan menggunakan sifat transform yang berbeza untuk menentukan kedudukan dan sudut putarannya. transform属性来实现立方体的旋转和位置调整。首先，我们创建了一个外部的容器(.container)，并设置了透视(perspective)属性，以及透视原点(perspective-origin)属性，这两个属性是用来控制立方体的3D效果的。然后，在容器内部，我们创建了一个立方体包裹层(.cube-wrapper)，并设置了transform-style: preserve-3d;属性，这个属性用来创建一个新的3D渲染上下文，使得内部的元素能够进行3D变换。接下来，我们创建了6个面(.face)，并分别使用不同的transform属性来确定它们的位置和旋转角度。
最后，我们添加了一个@keyframes
@keyframes untuk menukar sudut putaran kubus secara berterusan supaya ia boleh terus berputar. Dengan menganalisis kod di atas, kita dapat melihat bahawa tidak sukar untuk mencapai kesan kiub berputar 3D Ia hanya memerlukan beberapa sifat CSS asas dan beberapa kesan animasi mudah. Sudah tentu, ini hanyalah contoh asas, anda boleh membuat pelarasan dan sambungan yang lebih kompleks mengikut keperluan anda. Contohnya, anda boleh menambah imej latar belakang yang berbeza pada setiap sisi, menggunakan warna kecerunan untuk mencipta kesan tiga dimensi, menambah teks atau ikon dan banyak lagi. Selagi anda menggunakan imaginasi anda, kesan kiub berputar 3D ini boleh menjadi lebih menakjubkan. Ringkasnya, dengan menggunakan sifat transformasi 3D CSS, kita boleh mencapai kesan kiub berputar 3D dengan mudah. Di atas adalah contoh pelaksanaan asas, saya harap ia dapat memberi anda beberapa idea dan inspirasi untuk mencapai kesan yang hebat dalam pembangunan web. Berikan permainan penuh kepada kreativiti anda dan cipta kesan yang lebih menakjubkan! #🎜🎜#Atas ialah kandungan terperinci Kesan fantasi lukisan CSS: mencapai kesan kiub berputar 3D. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!