CSS3动画变化——扑克牌效果
2020-03-28 20:07
676 查看
实现扑克牌翻牌效果
a)确定3D变换,及其他相关元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ //清除浏览器原带的格式 margin: 0; padding: 0; } #content{ width: 800px; height: 1000px; margin: 0 auto; border: 1px green solid; font-size: 30px; text-align: center; } .side{ width: 300px; height: 300px; line-height: 300px; } .back{ background-color: #cd8bff; } .front{ background-color: #53ffc5; } #box{ width: 300px; height: 300px; position: relative; left: 250px; top:100px; transform-style: preserve-3d; //确定3D变换 -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transition: all 3s ease ; //确定过渡3秒,速度为快慢快 -webkit-transition: all 3s ease ; -moz-transition: all 3s ease; -ms-transition: all 3s ease; -o-transition: all 3s ease; } #box:hover{ transform: rotateX(180deg); //将box翻转沿X180度 -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -o-transform: rotateX(180deg); } </style> </head> <body> <div id="content"> <div id="box"> <div class="side front"> <p>嗨</p> </div> <div class="side back"> <p>你好</p> </div> </div> </div> </body> </html>
效果图:
b)确定文字翻转、side的绝对定位并确定前后顺序
由上图可知图片翻转会让文字翻转180度,而不好辨认,所以需要再次翻转180度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ //清除浏览器原带的格式 margin: 0; padding: 0; } #content{ width: 800px; height: 1000px; margin: 0 auto; border: 1px green solid; font-size: 30px; text-align: center; } .side{ width: 300px; height: 300px; line-height: 300px; position: absolute; //绝对定位,让文档流原位置丢失,来达到叠加效果 } .back{ background-color: #cd8bff; } .back p{ -webkit-transform: rotateX(180deg); //让背面的文字翻转180度 -moz-transform: rotateX(180deg); //所以当文字翻转的时候,正好被翻转360度,汉字是正的 -ms-transform: rotateX(180deg); -o-transform: rotateX(180deg); transform: rotateX(180deg); } .front{ background-color: #53ffc5; z-index: 2; //确定前后的顺序 } #box{ width: 300px; height: 300px; position: relative; left: 250px; top:100px; transform-style: preserve-3d; //确定3D变换 -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transition: all 3s ease ; //确定过渡3秒,速度为快慢快 -webkit-transition: all 3s ease ; -moz-transition: all 3s ease; -ms-transition: all 3s ease; -o-transition: all 3s ease; } #box:hover{ transform: rotateX(180deg); //将box翻转沿X180度 -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -o-transform: rotateX(180deg); } </style> </head> <body> <div id="content"> <div id="box"> <div class="side front"> <p>嗨</p> </div> <div class="side back"> <p>你好</p> </div> </div> </div> </body> </html>
效果图:
c)添加3D效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ //清除浏览器原带的格式 margin: 0; padding: 0; } #content{ width: 800px; height: 1000px; margin: 0 auto; border: 1px green solid; font-size: 30px; text-align: center; perspective: 1000px; //确定3D效果 -moz-perspective: 1000px; -ms-perspective: 1000px; -o-perspective: 1000px; -webkit-perspective: 1000px; } .side{ width: 300px; height: 300px; line-height: 300px; position: absolute; //绝对定位,让文档流原位置丢失,来达到叠加效果 } .back{ background-color: #cd8bff; } .back p{ -webkit-transform: rotateX(180deg); //让背面的文字翻转180度 -moz-transform: rotateX(180deg); //所以当文字翻转的时候,正好被翻转360度,汉字是正的 -ms-transform: rotateX(180deg); -o-transform: rotateX(180deg); transform: rotateX(180deg); } .front{ background-color: #53ffc5; z-index: 2; //确定前后的顺序 } #box{ width: 300px; height: 300px; position: relative; left: 250px; top:100px; transform-style: preserve-3d; //确定3D变换 -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transition: all 3s ease ; //确定过渡3秒,速度为快慢快 -webkit-transition: all 3s ease ; -moz-transition: all 3s ease; -ms-transition: all 3s ease; -o-transition: all 3s ease; } #box:hover{ transform: rotateX(180deg); //将box翻转沿X180度 -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -o-transform: rotateX(180deg); } </style> </head> <body> <div id="content"> <div id="box"> <div class="side front"> <p>嗨</p> </div> <div class="side back"> <p>你好</p> </div> </div> </div> </body> </html>
效果图:
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- CSS3背景颜色变化、平移的动画效果
- 使用 CSS3 实现超炫的 Loading(加载)动画效果
- css3动画 文字自动缩放 图片自动移动效果的制作
- css3 transition属性实现3d动画效果
- css3动画实现类菊花loading效果
- 使用CSS3实现超炫的Loading(加载)动画效果
- 一款纯css3实现的机器人看书动画效果
- Layout动画:在android布局发生变化时添加动画效果
- css3动画效果
- 深入CSS3 动画效果的总结详解
- 用css3实现鼠标移入在原来的层上面显示另一个层的动画效果
- 使用 CSS3 制作一组超时尚的动画按钮效果
- 使用CSS3实现超炫的Loading(加载)动画效果
- CSS3感应鼠标的div背景闪烁动画效果
- 用CSS3实现loading动画效果
- 监听滚动事件,实现导航栏吸顶css3动画效果--vue
- 分享36个令你意想不到的 CSS3 动画效果网页
- Js点击触发Css3的动画Animations、过渡Transitions效果
- css3动画效果模板
- CSS3系列三(与背景边框相关样式 、变形处理、动画效果)