CSS實現(xiàn)卡片3D翻轉(zhuǎn)效果的示例代碼
發(fā)布時間：2018-03-06 14:18:22 作者：hester灬 
我要評論
我要評論本篇文章主要介紹了CSS實現(xiàn)卡片3D翻轉(zhuǎn)效果的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
本文介紹了CSS實現(xiàn)卡片3D翻轉(zhuǎn)效果的示例代碼，分享給大家，具體如下：
效果：
代碼：
html：
<div class="main"> <div class="box b1"></div> <div class="box b2"></div> </div>
css：
.main {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 300px;
transform: translate(-50%,-50%);
-webkit-perspective: 1500;
-moz-perspective: 1500;
}
.box {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
transition: all 1s;
backface-visibility: hidden;
border-radius: 10px;
cursor: pointer;
}
.b1{
background:skyblue;
}
.b2 {
background:tomato;
transform: rotateY(-180deg);
}
javascript：
var b1 = document.querySelector(".b1");
var b2 = document.querySelector(".b2");
b1.onclick = function() {
b1.style.transform = "rotateY(180deg)";
b2.style.transform = "rotateY(0deg)";
}
b2.onclick = function() {
b2.style.transform = "rotateY(-180deg)";
b1.style.transform = "rotateY(0deg)";
}
-webkit-perspective：透視效果
backface-visibility：隱藏被旋轉(zhuǎn)的 div 元素的背面
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了CSS實現(xiàn)鼠標滑過卡片上浮效果的示例，幫助大家更好的利用CSS制作網(wǎng)頁特效，美化自身網(wǎng)頁，感興趣的朋友可以了解下2020-11-02
css實現(xiàn)網(wǎng)頁右下角點贊小卡片效果（實例代碼）
這篇文章主要介紹了css實現(xiàn)網(wǎng)頁右下角點贊小卡片效果，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-09-02
這篇文章主要介紹了CSS實現(xiàn)一個交互感不錯的卡片列表,涉及到知識塊本文結(jié)合實例代碼給大家講解的非常詳細，需要的朋友可以參考下2023-08-24
