纯css3实现3D立方体旋转特效代码
上网易前端微专业课程，里面有一个课外作业是实现一个3D旋转立方体，花了点时间做了下，还有点意思，写个简单教程，供大家学习。 先放上最终要实现的效果 .
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>CSS3 3D立方体多边形动画特效 - 代码笔记</title><style type="text/css">*{
margin:0 auto;
padding:0;
}
@keyframes rotate{
0%{
transform:rotateX(0deg) rotateY(0deg);
}
100%{
transform:rotateX(360deg) rotateY(360deg);
}
}
html{
background:linear-gradient(#ff0 0%, #000 80%);
height:100%;
}
.wrap{
margin-top:200px;
perspective: 1000px; /* 视图距元素的距离 相当于摄像机 */
}
.cube{
width:200px;
height:200px;
position:relative;
color:#fff;
font-size:36px;
font-weight:bold;
text-align:center;
line-height:200px;
transform-style:preserve-3d; /* 默认flat 2D */
transform:rotateX(-30deg) rotateY(-70deg);
animation:rotate 20s infinite linear; /*播放时间 播放次数为循环 缓动效果为匀速 */
}
.cube > div{
width:100%;
height:100%;
border:1px solid #fff;
position:absolute;
background-color:#333;
opacity:.6;
transition:transform 0.4s ease-in;
}
.cube .out-front{
transform: translateZ(100px);
}
.cube .out-back{
transform: translateZ(-100px) rotateY(180deg);
}
.cube .out-left{
transform: translateX(-100px) rotateY(-90deg);
}
.cube .out-right{
transform: translateX(100px) rotateY(90deg);
}
.cube .out-top{
transform: translateY(-100px) rotateX(90deg);
}
.cube .out-bottom{
transform: translateY(100px) rotateX(-90deg);
}
.cube > span{
display:block;
width:100px;
height:100px;
border:1px solid black;
background-color:#999;
position:absolute;
top:50px;
left:50px;
}
.cube .in-front{
transform: translateZ(50px);
}
.cube .in-back{
transform: translateZ(-50px) rotateY(180deg);
}
.cube .in-left{
transform: translateX(-50px) rotateY(-90deg);
}
.cube .in-right{
transform: translateX(50px) rotateY(90deg);
}
.cube .in-top{
transform: translateY(-50px) rotateX(90deg);
}
.cube .in-bottom{
transform: translateY(50px) rotateX(-90deg);
}
.wrap:hover .out-front{
transform: translateZ(200px);
}
.wrap:hover .out-back{
transform: translateZ(-200px) rotateY(180deg);
}
.wrap:hover .out-left{
transform: translateX(-200px) rotateY(-90deg);
}
.wrap:hover .out-right{
transform: translateX(200px) rotateY(90deg);
}
.wrap:hover .out-top{
transform: translateY(-200px) rotateX(90deg);
}
.wrap:hover .out-bottom{
transform: translateY(200px) rotateX(-90deg);
}
</style>
</head>
<body>
<div class="wrap">
<div class="cube">
<div class="out-front">前面</div>
<div class="out-back">后面</div>
<div class="out-left">左面</div>
<div class="out-right">右面</div>
<div class="out-top">上面</div>
<div class="out-bottom">下面</div>
<span class="in-front"></span>
<span class="in-back"></span>
<span class="in-left"></span>
<span class="in-right"></span>
<span class="in-top"></span>
<span class="in-bottom"></span>
</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
</div>
</body>
</html>【相关推荐】
1. 特别推荐：“php程序员工具箱”V0.1版本下载
2. 免费css在线视频教程
Atas ialah kandungan terperinci 纯css3实现3D立方体旋转特效代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1376
52
Cara menggunakan Vue untuk melaksanakan kesan tetingkap timbul
Sep 22, 2023 am 09:40 AM
Cara menggunakan Vue untuk melaksanakan kesan tetingkap timbul memerlukan contoh kod khusus Dalam beberapa tahun kebelakangan ini, dengan pembangunan aplikasi web, kesan tetingkap timbul telah menjadi salah satu kaedah interaksi yang biasa digunakan di kalangan pembangun. Sebagai rangka kerja JavaScript yang popular, Vue menyediakan fungsi yang kaya dan kemudahan penggunaan, dan sangat sesuai untuk melaksanakan kesan tetingkap timbul. Artikel ini akan memperkenalkan cara menggunakan Vue untuk melaksanakan kesan tetingkap timbul dan memberikan contoh kod khusus. Pertama, kita perlu mencipta projek Vue baharu menggunakan alat CLI Vue. hujung terbuka
Cara menggunakan Vue untuk melaksanakan kesan topeng skrin penuh
Sep 19, 2023 pm 04:14 PM
Cara menggunakan Vue untuk melaksanakan kesan penutup skrin penuh Dalam pembangunan web, kami sering menghadapi senario yang memerlukan pelekat skrin penuh, seperti memaparkan lapisan pelindung semasa memuatkan data untuk menghalang pengguna daripada melakukan operasi lain atau dalam beberapa senario khas. Gunakan lapisan topeng untuk menyerlahkan elemen. Vue ialah rangka kerja JavaScript popular yang menyediakan alatan dan komponen yang mudah untuk mencapai pelbagai kesan. Dalam artikel ini, saya akan memperkenalkan cara menggunakan Vue untuk mencapai kesan pelekat skrin penuh, dan memberikan beberapa contoh kod khusus. Pertama, kita
Cara menggunakan Vue untuk melaksanakan kesan bar sisi
Sep 19, 2023 pm 02:00 PM
Cara menggunakan Vue untuk melaksanakan kesan bar sisi Vue ialah rangka kerja JavaScript yang popular. Kesederhanaan, kemudahan penggunaan dan fleksibilitinya membolehkan pembangun membina aplikasi satu halaman interaktif dengan cepat. Dalam artikel ini, kami akan mempelajari cara menggunakan Vue untuk melaksanakan kesan bar sisi biasa dan memberikan contoh kod khusus untuk membantu kami memahami dengan lebih baik. Buat projek Vue Pertama, kita perlu mencipta projek Vue. Anda boleh menggunakan VueCLI (antara muka baris arahan) yang disediakan oleh Vue, yang boleh menjana dengan cepat
Laksanakan kesan flip kad dalam program mini WeChat
Nov 21, 2023 am 10:55 AM
Melaksanakan kesan flipping kad dalam program mini WeChat Dalam program mini WeChat, melaksanakan kesan flipping kad ialah kesan animasi biasa yang boleh meningkatkan pengalaman pengguna dan daya tarikan interaksi antara muka. Yang berikut akan memperkenalkan secara terperinci cara melaksanakan kesan khas flipping kad dalam applet WeChat dan memberikan contoh kod yang berkaitan. Pertama, anda perlu menentukan dua elemen kad dalam fail susun atur halaman program mini, satu untuk memaparkan kandungan hadapan dan satu untuk memaparkan kandungan belakang Kod sampel khusus adalah seperti berikut: <!--index.wxml-. ->&l
HTML, CSS dan jQuery: Teknik untuk mencapai kesan lipatan dan pengembangan imej
Oct 24, 2023 am 11:05 AM
HTML, CSS dan jQuery: Pengenalan kepada teknik untuk melaksanakan lipatan imej dan mengembangkan kesan khas Dalam reka bentuk dan pembangunan web, kita selalunya perlu melaksanakan beberapa kesan khas dinamik untuk meningkatkan daya tarikan dan interaktiviti halaman. Antaranya, kesan lipatan dan bukaan imej adalah teknik biasa tetapi menarik. Melalui kesan khas ini, kami boleh membuat imej dilipat atau dikembangkan di bawah operasi pengguna untuk menunjukkan lebih banyak kandungan atau butiran. Artikel ini akan memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk mencapai kesan ini, dengan contoh kod khusus. merealisasikan pemikiran
Cara menggunakan Vue untuk melaksanakan kesan bar kemajuan
Sep 19, 2023 am 09:22 AM
Cara menggunakan Vue untuk melaksanakan kesan bar kemajuan Bar kemajuan ialah elemen antara muka biasa yang boleh digunakan untuk memaparkan penyelesaian tugas atau operasi. Dalam rangka kerja Vue, kita boleh melaksanakan kesan khas bar kemajuan melalui beberapa kod mudah. Artikel ini akan memperkenalkan cara menggunakan Vue untuk melaksanakan kesan bar kemajuan dan memberikan contoh kod khusus. Cipta komponen Vue Pertama, kita perlu mencipta komponen Vue untuk melaksanakan fungsi bar kemajuan. Dalam Vue, komponen boleh diguna semula dan boleh digunakan di beberapa tempat. Buat fail bernama Pro
Bagaimana untuk memutar gambar Word
Mar 19, 2024 pm 06:16 PM
Apabila kita menggunakan perisian pejabat Word untuk pemprosesan dokumen, kita selalunya perlu memasukkan beberapa gambar dan bahan lain ke dalam dokumen Walau bagaimanapun, untuk mencapai susun atur yang cantik, kita juga perlu melakukan beberapa susun atur khas pada gambar, antaranya pemprosesan putaran pemprosesan tetapan taip yang paling asas, walau bagaimanapun, bagi sesetengah pendatang baru di tempat kerja yang baru bersentuhan dengan perisian pejabat Word, mereka mungkin tidak dapat memproses gambar dalam dokumen Word. Di bawah, kami akan berkongsi cara memutar gambar dalam Word. Kami berharap ia akan membantu dan memberi inspirasi kepada anda. 1. Mula-mula, kami membuka dokumen Word, dan kemudian klik butang Sisip-Gambar pada bar menu untuk memasukkan gambar rawak pada komputer untuk memudahkan operasi dan demonstrasi kami. 2. Jika kita ingin memutarkan imej, maka kita perlu
Langkah untuk mematikan kesan trek tetikus dalam Windows 10
Dec 31, 2023 pm 09:53 PM
Apabila kami menggunakan sistem win10, kami boleh membuat banyak tetapan yang diperibadikan, termasuk kesan khas trek tetikus Walau bagaimanapun, ramai pengguna tidak tahu cara mematikan kesan khas trek tetikus dalam win10 Atas sebab ini, kami telah menyediakan kaedah terperinci. Bagaimana untuk mematikan kesan trek tetikus dalam Windows 10: 1. Pertama, klik kanan pada ruang kosong pada desktop, dan kemudian klik "Peribadikan". 2. Kemudian klik "Tema" di sebelah kiri dan pilih "Kursor Tetikus" di sebelah kanan. 3. Selepas memasukkan sifat, anda boleh melihat dan memilih "Pilihan Penunjuk". 4. Kemudian tatal ke bawah untuk melihat keterlihatan, dan √ ditandakan pada masa ini. 5. Nyahtanda, kemudian klik Guna dan OK.
