H5学习之制作照片立方体
分类: 程序开发 766 1
这个立方体听好玩的,照片来着网络,如有侵权,请联系我删除,谢谢。
代码在下:
<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>
共 1 条评论关于 “H5学习之制作照片立方体”