首页 > 代码库 > 立方体旋转 【web前端学习部落22群120342833】
立方体旋转 【web前端学习部落22群120342833】
效果：
HTML部分：
<body class="body">
<div class="rect-wrap"> <!-- //舞台元素，设置perspective，让其子元素获得透视效果。 -->
<div class="container"> <!-- //容器，设置transform-style: preserve-3d，让其子元素在3D空间呈现 -->
<div class="top slide">1</div> <!-- //立方体的六个面 -->
<div class="bottom slide">2</div>
<div class="left slide">3</div>
<div class="right slide">4</div>
<div class="front slide">5</div>
<div class="back slide">6</div>
</div>
</div>
</body>
CSS:
<style>
.rect-wrap {
position: relative;
perspective: 2000px;
}
.container {
width: 400px;
height: 400px;
transform-style: preserve-3d;
transform-origin: 50% 50% 100px; /* //设置3d空间的原点在平面中心再向Z轴移动200px的位置 */
/* left: 50%;
margin-left: -200px; */
top: 100px;
}
.slide {
width: 200px;
height: 200px;
position: absolute;
background: #000;
line-height: 200px;
text-align: center;
color: #fff;
font-size: 30px;
font-weight: bold;
}
.top {
left: 100px;
top: -100px;
transform: rotateX(-90deg);
transform-origin: bottom;
background: red;
}
.bottom {
left: 100px;
bottom: -100px;
transform: rotateX(90deg);
transform-origin: top;
background: grey;
}
.left {
left: -100px;
bottom: 100px;
transform: rotateY(90deg);
transform-origin: right;
background: green;
}
.right {
left: 300px;
bottom: 100px;
transform: rotateY(-90deg);
transform-origin: left;
background: yellow;
}
.front {
left: 100px;
top: 100px;
transform: translateZ(200px);
background: black;
}
.back {
left: 100px;
top: 100px;
transform: translateZ(0);;
background: blue;
}
@keyframes rotate-frame {
0% {
transform: rotateX(0deg) rotateY(0deg);
}
10% {
transform: rotateX(0deg) rotateY(180deg);
}
20% {
transform: rotateX(-180deg) rotateY(180deg);
}
30% {
transform: rotateX(-360deg) rotateY(180deg);
}
40% {
transform: rotateX(-360deg) rotateY(360deg);
}
50% {
transform: rotateX(-180deg) rotateY(360deg);
}
60% {
transform: rotateX(90deg) rotateY(180deg);
}
70% {
transform: rotateX(0) rotateY(180deg);
}
80% {
transform: rotateX(90deg) rotateY(90deg);
}
90% {
transform: rotateX(90deg) rotateY(0);
}
100% {
transform: rotateX(0) rotateY(0);
}
}
.container{
animation: rotate-frame 30s linear infinite;
}
</style>
1.3维空间图
电脑屏幕中心为原点，横向为X轴，纵向为Y轴，人脸的方向为Z轴；
translate(x,y)、translateX(x)、translateY(y)、translateZ(z)、translate3d(x,y,z)：定义位置的移动距离
rotate(angle)、rotateX(a)、rotateY(a)、rotateZ(a)、rotate3d(x,y,z,angle)：定义元素的旋转角度。
2.perspective属性
perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
注释：perspective 属性只影响 3D 转换元素。
提示：请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。
3.transform-style属性
transform-style: flat|preserve-3d; 默认值为flat,表示子元素以2D平面呈现；perserve-3d表示子元素以3D平面呈现
4.transform-origin属性
transform-origin 属性允许您改变被转换元素的位置（可以理解为元素以哪个位置为旋转原点）。
语法：
transform-origin: x-axis y-axis z-axis;
有大量前端开发工具及学习资料，可以搜群【web前端学习部落22群】进行下载，遇到学习问题也可以问群内专家以及课程老师哟
立方体旋转 【web前端学习部落22群120342833】