您现在的位置是:网站首页> 编程资料编程资料

CSS实现卡片3D翻转效果的示例代码一款基于css3麻将筛子3D翻转特效的实例教程css3实现3D色子翻转特效css3的图形3d翻转效果应用示例简单几步用纯CSS3实现3D翻转效果

2021-09-04 1050人已围观

简介 本篇文章主要介绍了CSS实现卡片3D翻转效果的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

本文介绍了CSS实现卡片3D翻转效果的示例代码,分享给大家,具体如下:

效果:

代码:

html:

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 元素的背面

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

相关内容

-六神源码网