这个立方体听好玩的,照片来着网络,如有侵权,请联系我删除,谢谢。
代码在下:
<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>
Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
justify-content属性定义了项目在主轴上的对齐方式。
align-items属性定义项目在交叉轴上如何对齐。
perspective 属性定义 3D 元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。注释:perspective 属性只影响 3D 转换元素。就是镜头到元素图像的距离!