您好,登錄后才能下訂單哦!
小編給大家分享一下web開發(fā)中實(shí)現(xiàn)卡片3D翻轉(zhuǎn)效果的方法,希望大家閱讀完這篇文章后大所收獲,下面讓我們一起去探討吧!
具體如下:
效果:
代碼:
html:
<p class="main"> <p class="box b1"></p> <p class="box b2"></p> </p>
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)的 p 元素的背面
看完了這篇文章,相信你對(duì)web開發(fā)中實(shí)現(xiàn)卡片3D翻轉(zhuǎn)效果的方法有了一定的了解,想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。