您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章将为大家详细讲解有关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翻转效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。