CSS3动画变化——扑克牌效果

比眉伴天荒 2023-07-09 02:11 78阅读 0赞

实现扑克牌翻牌效果

a）确定3D变换，及其他相关元素

  1. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{                                           //清除浏览器原带的格式
  2.                 margin: 0;
  3.                 padding: 0;
  4.             }
  5.             #content{ 
  6.                 width: 800px;
  7.                 height: 1000px;
  8.                 margin: 0 auto;
  9.                 border: 1px green solid;
  10.                 font-size: 30px;
  11.                 text-align: center;
  12.             }
  13.             .side{ 
  14.                 width: 300px;
  15.                 height: 300px;
  16.                 line-height: 300px;
  17.             }
  18.             .back{ 
  19.                 background-color: #cd8bff;
  20.             }
  21.             .front{ 
  22.                 background-color: #53ffc5;
  23.             }
  24.             #box{ 
  25.                 width: 300px;
  26.                 height: 300px;
  27.                 position: relative;
  28.                 left: 250px;
  29.                 top:100px;
  30.                 transform-style: preserve-3d;           //确定3D变换
  31.                 -webkit-transform-style: preserve-3d;
  32.                 -moz-transform-style: preserve-3d;
  33.                 -ms-transform-style: preserve-3d;
  34.                 -o-transform-style: preserve-3d;
  35.                 transition: all 3s ease ;               //确定过渡3秒，速度为快慢快
  36.                 -webkit-transition: all 3s ease ;
  37.                 -moz-transition:  all 3s ease;
  38.                 -ms-transition:  all 3s ease;
  39.                 -o-transition:  all 3s ease;
  40.             }
  41.             #box:hover{ 
  42.                 transform: rotateX(180deg);             //将box翻转沿X180度
  43.                 -webkit-transform: rotateX(180deg);
  44.                 -moz-transform: rotateX(180deg);
  45.                 -ms-transform: rotateX(180deg);
  46.                 -o-transform: rotateX(180deg);
  47.             }
  48.         </style>
  49.     </head>
  50.     <body>
  51.         <div id="content">
  52.             <div id="box">
  53.                 <div class="side front">
  54.                     <p>嗨</p>
  55.                 </div>
  56.                 <div class="side back">
  57.                     <p>你好</p>
  58.                 </div>
  59.             </div>
  60.         </div>
  61.     </body>
  62. </html>

效果图：

在这里插入图片描述

b）确定文字翻转、side的绝对定位并确定前后顺序

由上图可知图片翻转会让文字翻转180度，而不好辨认，所以需要再次翻转180度

  1. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{                                           //清除浏览器原带的格式
  2.                 margin: 0;
  3.                 padding: 0;
  4.             }
  5.             #content{ 
  6.                 width: 800px;
  7.                 height: 1000px;
  8.                 margin: 0 auto;
  9.                 border: 1px green solid;
  10.                 font-size: 30px;
  11.                 text-align: center;
  12.             }
  13.             .side{ 
  14.                 width: 300px;
  15.                 height: 300px;
  16.                 line-height: 300px;
  17.                 position: absolute;                     //绝对定位，让文档流原位置丢失，来达到叠加效果
  18.             }
  19.             .back{ 
  20.                 background-color: #cd8bff;
  21.             }
  22.             .back p{ 
  23.                 -webkit-transform: rotateX(180deg);     //让背面的文字翻转180度
  24.                 -moz-transform: rotateX(180deg);        //所以当文字翻转的时候，正好被翻转360度，汉字是正的
  25.                 -ms-transform: rotateX(180deg);
  26.                 -o-transform: rotateX(180deg);
  27.                 transform: rotateX(180deg);
  28.             }
  29.             .front{ 
  30.                 background-color: #53ffc5;
  31.                 z-index: 2;                             //确定前后的顺序
  32.             }
  33.             #box{ 
  34.                 width: 300px;
  35.                 height: 300px;
  36.                 position: relative;
  37.                 left: 250px;
  38.                 top:100px;
  39.                 transform-style: preserve-3d;           //确定3D变换
  40.                 -webkit-transform-style: preserve-3d;
  41.                 -moz-transform-style: preserve-3d;
  42.                 -ms-transform-style: preserve-3d;
  43.                 -o-transform-style: preserve-3d;
  44.                 transition: all 3s ease ;               //确定过渡3秒，速度为快慢快
  45.                 -webkit-transition: all 3s ease ;
  46.                 -moz-transition:  all 3s ease;
  47.                 -ms-transition:  all 3s ease;
  48.                 -o-transition:  all 3s ease;
  49.             }
  50.             #box:hover{ 
  51.                 transform: rotateX(180deg);             //将box翻转沿X180度
  52.                 -webkit-transform: rotateX(180deg);
  53.                 -moz-transform: rotateX(180deg);
  54.                 -ms-transform: rotateX(180deg);
  55.                 -o-transform: rotateX(180deg);
  56.             }
  57.         </style>
  58.     </head>
  59.     <body>
  60.         <div id="content">
  61.             <div id="box">
  62.                 <div class="side front">
  63.                     <p>嗨</p>
  64.                 </div>
  65.                 <div class="side back">
  66.                     <p>你好</p>
  67.                 </div>
  68.             </div>
  70.         </div>
  71.     </body>
  72. </html>

效果图：

在这里插入图片描述

c）添加3D效果

  1. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{                                           //清除浏览器原带的格式
  2.                 margin: 0;
  3.                 padding: 0;
  4.             }
  5.             #content{ 
  6.                 width: 800px;
  7.                 height: 1000px;
  8.                 margin: 0 auto;
  9.                 border: 1px green solid;
  10.                 font-size: 30px;
  11.                 text-align: center;
  12.                 perspective: 1000px;                    //确定3D效果
  13.                 -moz-perspective: 1000px;
  14.                 -ms-perspective: 1000px;
  15.                 -o-perspective: 1000px;
  16.                 -webkit-perspective: 1000px;
  17.             }
  18.             .side{ 
  19.                 width: 300px;
  20.                 height: 300px;
  21.                 line-height: 300px;
  22.                 position: absolute;                     //绝对定位，让文档流原位置丢失，来达到叠加效果
  23.             }
  24.             .back{ 
  25.                 background-color: #cd8bff;
  26.             }
  27.             .back p{ 
  28.                 -webkit-transform: rotateX(180deg);     //让背面的文字翻转180度
  29.                 -moz-transform: rotateX(180deg);        //所以当文字翻转的时候，正好被翻转360度，汉字是正的
  30.                 -ms-transform: rotateX(180deg);
  31.                 -o-transform: rotateX(180deg);
  32.                 transform: rotateX(180deg);
  33.             }
  34.             .front{ 
  35.                 background-color: #53ffc5;
  36.                 z-index: 2;                             //确定前后的顺序
  37.             }
  38.             #box{ 
  39.                 width: 300px;
  40.                 height: 300px;
  41.                 position: relative;
  42.                 left: 250px;
  43.                 top:100px;
  44.                 transform-style: preserve-3d;           //确定3D变换
  45.                 -webkit-transform-style: preserve-3d;
  46.                 -moz-transform-style: preserve-3d;
  47.                 -ms-transform-style: preserve-3d;
  48.                 -o-transform-style: preserve-3d;
  49.                 transition: all 3s ease ;               //确定过渡3秒，速度为快慢快
  50.                 -webkit-transition: all 3s ease ;
  51.                 -moz-transition:  all 3s ease;
  52.                 -ms-transition:  all 3s ease;
  53.                 -o-transition:  all 3s ease;
  54.             }
  55.             #box:hover{ 
  56.                 transform: rotateX(180deg);             //将box翻转沿X180度
  57.                 -webkit-transform: rotateX(180deg);
  58.                 -moz-transform: rotateX(180deg);
  59.                 -ms-transform: rotateX(180deg);
  60.                 -o-transform: rotateX(180deg);
  61.             }
  62.         </style>
  63.     </head>
  64.     <body>
  65.         <div id="content">
  66.             <div id="box">
  67.                 <div class="side front">
  68.                     <p>嗨</p>
  69.                 </div>
  70.                 <div class="side back">
  71.                     <p>你好</p>
  72.                 </div>
  73.             </div>
  75.         </div>
  76.     </body>
  77. </html>

效果图：

在这里插入图片描述
本文只用于个人学习和纪录

发表评论

表情：
评论列表 （有 0 条评论，78人围观）

还没有评论，来说两句吧...

相关阅读

    相关 CSS3动画效果属性

    哎呦我去，这辈子我可没想到我会成为一名程序员，尽管是一个不入流的渣渣程序员，但那又怎样，继续努力呗。 瞅瞅我这次有遇到了什么麻烦，就一个项目那简直是一步一坑，绝了。 css

    墨蓝墨蓝/ 0 赞/ 19 阅读

    相关 css动画效果

    transform Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。 让一个盒子渐入渐出效果 @keyfra

    野性酷女野性酷女/ 0 赞/ 42 阅读

    相关 CSS3动画效果一

    CSS3添加了几个动画效果的属性，通过设置这些属性，可以做出一些简单的动画效果而不需要再去借助JavaScript。CSS3动画的属性主要分为三类：transform、tran

    亦凉亦凉/ 0 赞/ 359 阅读

    相关 Css3动画切换效果

    开发工具与关键技术：DW 作者：文泽钦 撰写时间：2019年3月21日 实在不知道写什么，就翻了老师给的一些css样式看看有什么好玩的，老师用伪类做了一个鼠标移入到d

    浅浅的花香味﹌浅浅的花香味﹌/ 0 赞/ 529 阅读