正方体
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.       body{
  8.         overflow: hidden;
  9.       }
  10.       .box {
  11.         width: 300px;
  12.         height: 300px;
  13.         position: relative;
  14.         top: 0;
  15.         bottom: 0;
  16.         left: 0;
  17.         right: 0;
  18.         margin: 200px auto;
  19.         transform-style: preserve-3d;
  20.         /* -webkit-perspective: 250; */ 
  21.         text-align: center;
  22.         animation:move 7s linear infinite;
  23.       }
  24.       .box div {
  25.         width: 100%;
  26.         height: 100%;
  27.         position: absolute;
  28.         font: 50px/300px "微软雅黑";
  29.         transition: all .8s;
  30.         background-size: 100% 100%;
  31.         opacity: 0.7;
  32.         text-align: center;
  33.       }            
  34.       @keyframes move{
  35.         from {transform:rotateX(0deg) rotateY(0deg);}
  36.         to {transform:rotateX(360deg) rotateY(360deg)}
  37.       }
  38.       .box div:nth-child(1) {
  39.         background: linear-gradient(#00FFFF,rgba(255,255,255,0.5));
  40.         transform: translateZ(150px);
  41.         box-shadow: 0 0 10px deepskyblue;
  42.       }            
  43.       .box div:nth-child(2) {
  44.         background: linear-gradient(#00FFFF,rgba(255,255,255,0.5));
  45.         transform: rotateY(90deg) translateZ(150px);
  46.         box-shadow: 0 0 10px deepskyblue;
  47.       }            
  48.       .box div:nth-child(3){
  49.         background: linear-gradient(#00FFFF,rgba(255,255,255,0.5));
  50.         transform: rotateY(180deg) translateZ(150px);
  51.         box-shadow: 0 0 10px deepskyblue;
  52.       }            
  53.       .box div:nth-child(4) {
  54.         background: linear-gradient(#00FFFF,rgba(255,255,255,0.5));
  55.         transform: rotateY(270deg) translateZ(150px);
  56.         box-shadow: 0 0 10px deepskyblue;
  57.       }            
  58.       .box div:nth-child(5) {
  59.         background: linear-gradient(#00FFFF,rgba(255,255,255,0.5));
  60.         transform: rotateX(90deg) translateZ(150px);
  61.         box-shadow: 0 0 10px deepskyblue;
  62.       }            
  63.       .box div:nth-child(6) {
  64.         background: linear-gradient(#00FFFF,rgba(255,255,255,0.5));
  65.         transform: rotateX(270deg) translateZ(150px);
  66.         box-shadow: 0 0 10px deepskyblue;
  67.       }
  68.       .box:hover div:nth-child(1){
  69.         transform: translateZ(300px);
  70.       }
  71.       .box:hover div:nth-child(2){
  72.         transform:rotateY(90deg) translateZ(300px);
  73.       }        
  74.       .box:hover div:nth-child(3){
  75.         transform:rotateY(180deg) translateZ(300px);
  76.       }        
  77.       .box:hover div:nth-child(4){
  78.         transform:rotateY(270deg) translateZ(300px);
  79.       }        
  80.       .box:hover div:nth-child(5){
  81.         transform:rotateX(90deg) translateZ(300px);
  82.       }        
  83.       .box:hover div:nth-child(6){
  84.         transform:rotateX(270deg) translateZ(300px);
  85.       }                
  86.     </style>
  87.   </head>
  88.   <body>
  89.     <div class="box">
  90.       <div>正前面</div>
  91.       <div>右面</div>
  92.       <div>正后面</div>
  93.       <div>左面</div>
  94.       <div>上面</div>
  95.       <div>下面</div>
  96.     </div>
  97.   </body>
  98. </html>

双层的立方体
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>3D炫酷相册</title>
  7.     <style>
  8.       * {
  9.         margin: 0;
  10.         padding: 0;
  11.       }
  13.       :root,
  14.       body {
  15.         height: 100%;
  16.         width: 100%;
  17.         background-color: black;
  18.       }
  20.       /* 最外层容器样式 */
  21.       .container {
  22.         width: 200px;
  23.         height: 200px;
  24.         position: absolute;
  25.         perspective: 2000px;
  26.         /* 调整视距 */
  27.         top: calc(50% - 100px);
  28.         left: calc(50% - 100px);
  29.         /* 垂直水平居中 */
  30.       }
  32.       /*立方体容器样式*/
  33.       .cube {
  34.         width: 200px;
  35.         height: 200px;
  36.         transform-style: preserve-3d;
  37.         transform: rotateX(-30deg) rotateY(-80deg);
  38.         animation: roddy 10s linear infinite;
  39.         /*设置动画匀速重复*/
  40.       }
  42.       @keyframes roddy {
  43.         0% {
  44.           transform: rotateX(0deg) rotateY(0deg);
  45.         }
  47.         100% {
  48.           transform: rotateX(360deg) rotateY(360deg);
  49.         }
  50.       }
  52.       .cube div {
  53.         position: absolute;
  54.         width: 200px;
  55.         height: 200px;
  56.         opacity: 0.8;
  57.         /* 设置透明度 */
  58.         transition: all 0.4s;
  59.         /* 过渡动画 */
  60.       }
  62.       /* 外面照片大小设置 */
  63.       .out_pic {
  64.         width: 200px;
  65.         height: 200px;
  66.       }
  68.       .cube .out_front {
  69.         transform: rotateY(0deg) translateZ(100px);
  70.       }
  72.       .cube .out_back {
  73.         transform: rotateY(180deg) translateZ(100px);
  74.       }
  76.       .cube .out_left {
  77.         transform: rotateY(90deg) translateZ(100px);
  78.       }
  80.       .cube .out_right {
  81.         transform: rotateY(-90deg) translateZ(100px);
  82.       }
  84.       .cube .out_top {
  85.         transform: rotateX(90deg) translateZ(100px);
  86.       }
  88.       .cube .out_bottom {
  89.         transform: rotateX(-90deg) translateZ(100px);
  90.       }
  92.       .cube #small {
  93.         position: absolute;
  94.         width: 100px;
  95.         height: 100px;
  96.         top: 50px;
  97.         left: 50px;
  98.       }
  100.       /* 里面照片大小设置 */
  101.       .in_pic {
  102.         width: 100px;
  103.         height: 100px;
  104.       }
  106.       .cube .in_front {
  107.         transform: rotateY(0deg) translateZ(50px);
  108.       }
  110.       .cube .in_back {
  111.         transform: rotateY(180deg) translateZ(50px);
  112.       }
  114.       .cube .in_left {
  115.         transform: rotateY(90deg) translateZ(50px);
  116.       }
  118.       .cube .in_right {
  119.         transform: rotateY(-90deg) translateZ(50px);
  120.       }
  122.       .cube .in_top {
  123.         transform: rotateX(90deg) translateZ(50px);
  124.       }
  126.       .cube .in_bottom {
  127.         transform: rotateX(-90deg) translateZ(50px);
  128.       }
  130.       /*鼠标移入后样式*/
  131.       .cube:hover .out_front {
  132.         transform: rotateY(0deg) translateZ(200px);
  133.       }
  135.       .cube:hover .out_back {
  136.         transform: rotateY(180deg) translateZ(200px);
  137.       }
  139.       .cube:hover .out_left {
  140.         transform: rotateY(90deg) translateZ(200px);
  141.       }
  143.       .cube:hover .out_right {
  144.         transform: rotateY(-90deg) translateZ(200px);
  145.       }
  147.       .cube:hover .out_top {
  148.         transform: rotateX(90deg) translateZ(200px);
  149.       }
  151.       .cube:hover .out_bottom {
  152.         transform: rotateX(-90deg) translateZ(200px);
  153.       }
  154.     </style>
  155.   </head>
  156.   <body>
  157.     <div class="container">
  158.       <div class="cube">
  159.         <!-- 外面立方体开始 -->
  160.         <div class="out_front">
  161.           <img src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3566088443,3713209594&fm=26&gp=0.jpg"
  162.                class="out_pic" />
  163.         </div>
  164.         <div class="out_back">
  165.           <img src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3566088443,3713209594&fm=26&gp=0.jpg"
  166.                class="out_pic" />
  167.         </div>
  168.         <div class="out_left">
  169.           <img src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3566088443,3713209594&fm=26&gp=0.jpg"
  170.                class="out_pic" />
  171.         </div>
  172.         <div class="out_right">
  173.           <img src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3566088443,3713209594&fm=26&gp=0.jpg"
  174.                class="out_pic" />
  175.         </div>
  176.         <div class="out_top">
  177.           <img src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3566088443,3713209594&fm=26&gp=0.jpg"
  178.                class="out_pic" />
  179.         </div>
  180.         <div class="out_bottom">
  181.           <img src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3566088443,3713209594&fm=26&gp=0.jpg"
  182.                class="out_pic" />
  183.         </div>
  184.         <!-- 外面立方体结束 -->
  185.         <!-- 里面立方体开始 -->
  186.         <div class="in_front" id="small">
  187.           <img src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3566088443,3713209594&fm=26&gp=0.jpg"
  188.                class="in_pic" />
  189.         </div>
  190.         <div class="in_back" id="small">
  191.           <img src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3566088443,3713209594&fm=26&gp=0.jpg"
  192.                class="in_pic" />
  193.         </div>
  194.         <div class="in_left" id="small">
  195.           <img src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3566088443,3713209594&fm=26&gp=0.jpg"
  196.                class="in_pic" />
  197.         </div>
  198.         <div class="in_right" id="small">
  199.           <img src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3566088443,3713209594&fm=26&gp=0.jpg"
  200.                class="in_pic" />
  201.         </div>
  202.         <div class="in_top" id="small">
  203.           <img src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3566088443,3713209594&fm=26&gp=0.jpg"
  204.                class="in_pic" />
  205.         </div>
  206.         <div class="in_bottom" id="small">
  207.           <img src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3566088443,3713209594&fm=26&gp=0.jpg"
  208.                class="in_pic" />
  209.         </div>
  210.         <!-- 里面立方体结束 -->
  211.       </div>
  212.     </div>
  213.   </body>
  214. </html>