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

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

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

上一篇：css3编写浏览器背景渐变背景色的方法CSS3实现带视差背景渐变效果的平滑图片轮播幻灯片特效源码详解CSS背景渐变图片transtion过渡效果技巧CSS3点击按钮实现背景渐变动画效果用CSS3实现背景渐变的方法CSS实现背景渐变和自动全屏的代码

下一篇：CSS 记录用户密码的方法CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网