雪让人的觉得只有一个字——冷。大地一片银白,一片清洁,而雪花仍如柳絮,如棉花,如鹅毛从天空飘飘洒洒。
本文介绍了CSS实现卡片3D翻转效果的示例代码,分享给大家,具体如下:
效果:
代码:
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:隐藏被旋转的 div 元素的背面
以上就是CSS如何实现卡片3D翻转效果的示例代码。人生,恰似一次远足只有痛了爱了才学会微笑。更多关于CSS如何实现卡片3D翻转效果的示例代码请关注haodaima.com其它相关文章!