• 当前标签:align-items

程序开发 H5学习之制作照片立方体

这个立方体听好玩的,照片来着网络,如有侵权,请联系我删除,谢谢。 代码在下: <html> <head>     <meta charset="UTF-8">     <title>立方体</title>     <style>         body{             margin: 0;             background-color: black;             height: 100%;             display: flex;             justify-content: center;             align-items: center;             perspective: 3000px;         }         main{             width: 300px;             height: 300px;             background-color: red;             position: relative;             transform-style: preserve-3d;             animation: 10s spin linear infinite;         }         main div{             width: 100%;             height: 100%;             border: 1px solid yellow;             position: absolute;         }         .font{             background-image: url(1.JPG);             transform: translateZ(150px);         }         .back{             background-image: url(2.JPG);             transform: translateZ(-150px);                    }         .left{             background-image: url(3.JPG);             transform: rotateY(90deg)translateZ(150px);         }         .right{             background-image: url(4.JPG);             transform: rotateY(90deg)translateZ(-150px);         }         .top{             background-image: url(5.JPG);             transform: rotateX(90deg)translateZ(150px);         }         .bottom{             background-image: url(6.JPG);             transform: rotateX(90deg)translateZ(-150px);         }         @keyframes spin{             0%{                 transform: rotateX(0)rotateY(0);             }             100%{                 transform: rotateX(360deg)rotateY(360deg);             }         }     </style> </head> <body>     <main>         <div class="font"></div>         <div class="back"></div>         <div class="left"></div>         <div class="right"></div>         <div class="top"></div>         <div class="bottom"></div>     </main> </body> </html> 素材下载:2017-03-20 lifangti.tar

2017-03-20 20:21:29 32 1 0
阅读详情
  • 1
前往