一、翻牌效果

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8"/>
  5.     <title>3D动画</title>
  6.     <style type="text/css">
  7.         body, div {
  8.             padding: 0;
  9.             margin: 0;
  10.         }
  12.         .container {
  13.             position: absolute;
  14.             top: 50%;
  15.             left: 50%;
  16.             margin-left: -177.5px;
  17.             margin-top: -250px;
  18.             width: 355px;
  19.             height: 500px;
  20.             perspective: 1000px;
  21.         }
  23.         .out_box {
  24.             position: relative;
  25.             height: 500px;
  26.             width: 355px;
  27.             transform-style: preserve-3d;
  28.             transition: 0.5s;
  29.             backface-visibility: hidden;
  30.         }
  32.         .out_box div {
  33.             position: absolute;
  34.             left: 0;
  35.             top: 0;
  36.             width: 100%;
  37.             height: 100%;
  38.             backface-visibility: hidden;
  39.         }
  41.         .out_box div.front_box {
  42.             background: url("puke-back.png") no-repeat;
  43.             background-size: 100% 100%;
  44.             z-index: 2;
  45.         }
  47.         .out_box div.back_box {
  48.             background: url("puke-k.png") no-repeat;
  49.             background-size: 100% 100%;
  50.             z-index: 1;
  51.             transform: rotateY(180deg);
  52.         }
  54.         .container:hover .out_box {
  55.             transform: rotateY(180deg);
  56.         }
  58.         .container:hover .back_box {
  59.             z-index: 3;
  60.         }
  61.     </style>
  62. </head>
  63. <body>
  64. <div class="container">
  65.     <div class="out_box">
  66.         <div class="front_box"></div>
  67.         <div class="back_box"></div>
  68.     </div>
  69. </div>
  70. </body>
  71. </html>

翻牌效果图

puke-back.pngpuke-k.png

二、钟摆

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         body, div {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  12.         .box {
  13.             margin: 20px auto;
  14.             width: 120px;
  15.             height: 300px;
  16.             background: url("zhongbai.png") no-repeat;
  17.             /*设置运动的原点为顶部中间的位置，这样动画都围绕这个点来实现运动*/
  18.             -webkit-transform-origin: top center;
  19.             transform-origin: top center;
  21.             /*设置运动的初始位置-->左边旋转45deg位置*/
  22.             -webkit-transform: rotate(45deg);
  23.             transform: rotate(45deg);
  25.             /*设置css3运动动画*/
  26.             -webkit-animation: move 1s ease infinite;
  27.             animation: move 1s ease infinite;
  28.         }
  30.         /*设置动画运动的关键帧*/
  31.         @-webkit-keyframes move {
  32.             0%, 100% {
  33.                 -webkit-transform: rotate(45deg);
  34.                 transform: rotate(45deg);
  35.             }
  36.             50% {
  37.                 -webkit-transform: rotate(-45deg);
  38.                 transform: rotate(-45deg);
  39.             }
  40.         }
  42.         @keyframes move {
  43.             0%, 100% {
  44.                 -webkit-transform: rotate(45deg);
  45.                 transform: rotate(45deg);
  46.             }
  47.             50% {
  48.                 -webkit-transform: rotate(-45deg);
  49.                 transform: rotate(-45deg);
  50.             }
  51.         }
  52.     </style>
  53. </head>
  54. <body>
  55. <div class="box"></div>
  56. </body>
  57. </html>

钟摆效果图

zhongbai.png