色子代码效果图展示

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>色子+旋转</title>
  6.     <style type="text/css">
  7.         body{
  8.             -webkit-perspective: 1800px;
  9.                     perspective: 1800px;
  10.             /*设置观看的距离*/
  11.             -webkit-perspective-origin:100%;
  12.                     perspective-origin:100%;
  13.                     /*设置观看的角度*/
  14.         }
  15.         .cube{
  16.             display: inline-block;
  17.             /*表示能够呈现块状元素和3D显示效果*/
  18.             width: 100px;
  19.             height: 100px;
  20.             margin: 100px;
  21.             -webkit-transform-style: preserve-3d;
  22.                     transform-style: preserve-3d;
  23.                     /*表示所有元素都是3D效果呈现*/
  24.             transition: all 5s;/*父元素大div里的所有子元素都改变随着transition-property:all;表示全部*/
  25.             /*2s表示的是过度所需要的时间设置*/
  26.         }
  27.         .cube>div{
  28.             position: absolute;
  29.             width: 100%;
  30.             /*宽度占整个大的div宽度的百分之百*/
  31.             height:100%;
  32.             box-shadow:inset 0 0 15px rgba(0,0,0,.2);
  33.             /*给盒阴影设置盒子内阴影 15px的像素阴影 透明度为0.2*/
  34.             background-color: rgba(255,255,255,.1);
  35.             /*设置盒子透明度为0.1*/
  36.             font-size: 20px;
  37.             text-align: center;/*文字居中*/
  38.             line-height: 100px;/*文字垂直居中*/
  39.         }
  41.         .front{
  42.             -webkit-transform: translateZ(50px);
  43.                     transform: translateZ(50px);
  44.         /*元素向z轴走50个像素 效果会更加的立体 */
  45.         }
  47.         .back{
  48.             -webkit-transform: rotateY(180deg) translateZ(50px);
  49.                     transform: rotateY(180deg) translateZ(50px);
  50.             /*向后以Y轴旋转180度*/
  51.         }
  53.         .left{
  54.             -webkit-transform: rotateY(-90deg) translateZ(50px);
  55.                     transform: rotateY(-90deg) translateZ(50px);
  56.             /*左侧*/
  57.         }
  59.         .right{
  60.             -webkit-transform: rotateY(90deg) translateZ(50px);
  61.                     transform: rotateY(90deg) translateZ(50px);
  62.             /*右侧*/
  63.         }
  65.         .top{
  66.             -webkit-transform: rotateX(90deg) translateZ(50px);
  67.                     transform: rotateX(90deg) translateZ(50px);
  68.                    /* 上*/
  69.         }
  71.         .bottom{
  72.             -webkit-transform: rotateX(-90deg) translateZ(50px);
  73.                     transform: rotateX(-90deg) translateZ(50px);
  74.                    /* 下*/
  75.         }
  77.         .c1:hover{
  78.             cursor:pointer;
  79.             /*鼠标经过时会出现小手的图标*/
  80.             -webkit-transform: rotateX(130deg);
  81.                     transform: rotateX(130deg);
  82.             /*表示的是在鼠标悬停在带有c1标签的大div的整体标签内就会带动里面的所有子元素标签发生所需要的旋转度数*/
  83.             /*此为以X轴顺势正旋转180度*/
  84.         }
  86.         .c2:hover{
  87.             cursor:pointer;
  88.             -webkit-transform: rotateY(-360deg);
  89.                     transform: rotateY(-360deg);
  90.             -webkit-transition:all 12s ease-in-out 2s;
  91.                     transition:all 12s ease-in-out 2s;
  92.         }
  93.     </style>
  94. </head>
  95. <body>
  96.     <div class="cube c1">
  97.         <div class="front">1</div>
  98.         <div class="back">2</div>
  99.         <div class="left">3</div>
  100.         <div class="right">4</div>
  101.         <div class="top">5</div>
  102.         <div class="bottom">6</div>
  103.     </div>
  104.     <div class="cube c2">
  105.         <div class="front">6</div>
  106.         <div class="back">5</div>
  107.         <div class="left">4</div>
  108.         <div class="right">3</div>
  109.         <div class="top">2</div>
  110.         <div class="bottom">1</div>
  111.     </div>
  112. </body>
  113. </html>