【前端基础】1 - 13 空间变换
§1-13 空间变换
1-13.1 空间变换简述
上一节内容主要讲述的是元素在平面上的转换。除了平面转换,还可以使用 transform
实现空间转换。
几乎所有平面转换的函数都有其空间转换版本,在原函数名基础上,后面添加 3d
或 Z
即可。如 translate3d(x,y,z)
或 translateZ(z)
。其中,Z 轴方向从屏幕指向用户。
这些变换也有单独控制其他轴向的属性。
若要实现空间变换,只是添加了空间转换属性还不够。浏览器还会以一个平面渲染元素。为能够看到空间变换效果,还需要在施加了空间变换属性的直接父元素上添加属性 perspective
。
perspective
指定用户眼睛到平面的距离(视距)。一般设置为 800px - 1200px
之间为宜。
1-13.2 空间平移
空间平移可以使用 translate3d(x,y,z)
或 translateZ(z)
实现。前者实现元素在三个方向上的平移(必须具有三个参数),后者实现元素仅在 Z 轴上的平移。
示例:元素仅在 Z 轴方向上的平移。
<div class="parent translation">
<div class="child"></div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.parent {
width: 200px;
height: 200px;
margin: 50px auto;
perspective: 1000px;
}
.child {
width: 100%;
height: 100%;
transition: all 0.5s;
}
.translation .child {
background-color: pink;
}
.translation:hover .child {
transform: translateZ(300px);
}
效果:
看起来如同元素缩放。
1-13.2 空间旋转
空间旋转可以使用 rotate3d(x,y,z,angle)
或 rotateZ(z)
实现。前者可用于自定义旋转轴位置及旋转角度(x,y,z
取值为 0~1
之间的数字),后者用于单独控制 Z 轴旋转的角度。
空间旋转变换重要的是明确旋转方向和角度,下面有一个简单的判断方法。
左手定则:左手握住旋转轴,大拇指指向坐标轴正向,四指弯曲并拢,四指朝向即为旋转角度为正值的方向。
示例:单独控制不同方向上的旋转。
<div class="parent rotation">
<div class="child"></div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.parent {
width: 200px;
height: 200px;
margin: 100px auto;
perspective: 1000px;
}
.child {
width: 100%;
height: 100%;
transition: all 0.5s;
}
/* 给子元素添加辨识度高的渐变色以方便查看旋转方向 */
.rotation .child {
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}
.rotation:hover .child {
/*transform: rotateX(45deg);*/
/*transform: rotateY(45deg);*/
transform: rotateZ(45deg);
}
1-13.3 立体呈现
基于上述空间平移和旋转的实现,可以使用 CSS 实现立方体的效果。希望在鼠标悬停时,立方体旋转以看清其他面。
这需要立方体的每一个面单独作为一个元素,嵌套在父级元素上。且父级元素需要设置属性 transform-style
。
默认情况下,transform-style
的值为 flat
,表示子级元素都在一个平面上。这里需要将值设为 preserve-3d
。接着需要设置子级元素相对于父级元素绝对定位。然后通过空间平移或旋转分别调整子级元素的位置即可。
最后,在父级元素添加鼠标悬停时的旋转效果即可。
示例:
<div class="cube">
<div class="front face"></div>
<div class="back face"></div>
<div class="left face"></div>
<div class="right face"></div>
<div class="bottom face"></div>
<div class="top face"></div>
</div>
.cube {
position: relative;
width: 200px;
height: 200px;
margin: 200px auto;
transform-style: preserve-3d;
transition: all 0.5s;
}
.cube .face {
position: absolute;
width: 100%;
height: 100%;
}
.front {
background-color: pink;
}
.back {
background-color: green;
transform: translateZ(-200px);
}
.left {
background-color: cornflowerblue;
transform: translate3d(-100px, 0, -100px) rotateY(-90deg);
}
.right {
background-color: violet;
transform: translate3d(100px, 0, -100px) rotateY(90deg);
}
.bottom {
background-color: wheat;
transform: translate3d(0, 100px, -100px) rotateX(-90deg);
}
.top {
background-color: tomato;
transform: translate3d(0, -100px, -100px) rotateX(90deg);
}
.cube:hover {
transform: rotate3d(0.5, 0.5, 0.5, -45deg);
}
1-13.4 空间缩放
在空间中的缩放属性有 scale3d(x,y,z)
或 scaleX(x)
, scaleY(y)
, scaleZ(z)
。在空间中沿不同轴向进行缩放。