transform 3D 空间转换

发布时间：2023-03-18 14:01:09 所属栏目：教程来源：

导读：transform 3D 空间转换
transform 这个属性的强大之处在于它可以把一个二维的空间转化成一个三维的空间，给视觉设计师更多的发挥空间，也给用户带来更好的视觉体验。

1. 官方定义
transform 属性向元素应用 3D

transform 3D 空间转换
transform 这个属性的强大之处在于它可以把一个二维的空间转化成一个三维的空间，给视觉设计师更多的发挥空间，也给用户带来更好的视觉体验。

1. 官方定义
transform 属性向元素应用 3D 转换。属性允许我们对元素进行旋转、缩放、移动或倾斜。

2. 解释
当给元素使用 transform 之后，它就可以在它原来所在的位置变成一个向任意空间变换的元素，这里可以通过在 Z 轴上的设置，让他在空间上呈现 3D 效果。

3. 语法
transform: none|transform-functions;
3D 空间坐标轴

坐标轴

坐标轴
值说明
值   描述
translate3d(x,y,z)   定义 3D 转换。
translateX(x)   定义转换，只是用 X 轴的值。
translateY(y)   定义转换，只是用 Y 轴的值。
translateZ(z)   定义 3D 转换，只是用 Z 轴的值。
scale3d(x,y,z)   定义 3D 缩放转换。
scaleX(x)   通过设置 X 轴的值来定义缩放转换。
scaleY(y)   通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)   通过设置 Z 轴的值来定义 3D 缩放转换。
rotate3d(x,y,z,angle)   定义 3D 旋转。
rotateX(angle)   定义沿着 X 轴的 3D 旋转。
rotateY(angle)   定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)   定义沿着 Z 轴的 3D 旋转。
transform-style   在空间内如何呈现 flat 2D 呈现, preserve-3d 3D 呈现
我们在 transform2D 中已经对平面属性做了详细的介绍，本章节主要是其 3D 属性，这些属性的使用需要在父级设置 perspective 和 transform-style

让父级有了透视效果以及设置父级在内部空间的呈现方式。

4. 兼容性
IE   Edge   Firefox   Chrome   Safari   Opera   ios   android
9+   12+   28+   4+   6.1+   12.1+   7+   4.4
5. 实例
通用 html ：

<div class="common demo">transfrom3d</div>
<div class="common demo-3d">transfrom3d</div>
通用 style ：

body{
perspective: px;
}
.common{
width:px;
height:px;
text-align: center;
line-height: px;
background:#f2f2f2;
border:px solid #ccc;
position: absolute;
top: ;
left: ;

}
.demo{
z-index: ;
opacity: ;
background: red;
}
demo-3d 在 z 坐标轴向内延伸 100px。
.demo-3d{
transform:translated( , ,-px);
}
demo 在 z 坐标轴向内延伸 100px ，效果图
说明：红色背景是 demo-3d 原来的位置，我们通过图片看到它的表现是水平向右移动且缩小了，其实他是进行了 3D 空间的移动。

demo-3d 在 z 轴空间上缩放。
.demo-3d{
transform:scaled( , ,);
}
demo 在 z 轴空间上缩放效果图
说明： scale3d 这个属性可以拆成 scaleX() 、scaleY() 、 scaleZ() 。我们发现 scaleZ() 在 3D 空间变化上，它的区间 0~1 是不起作用的，只有 0 代表缩小到 0（消失）， 1 (不变)。

demo-3d 在 z 轴上旋转。
.demo-3d{
transform: rotated(,,,deg);
}
demo-3d 在 z 轴上旋转效果图
说明：不推荐使用 rotate3d() 这个属性，因为它只能通过 0 或 1 去选择是否需要旋转，第 4 个参数给 1 个旋转角度，这种方式很不灵活，不过它的特性就是可以同时控制 x，y，z 方向上的旋转角度。

其实我们从 1～3 这 3 个例子中看到只设定了其中一项，接下来我们全方位的变化。

在 x，y，z 上应用 translate3d 和 rotateZ
.demo-3d{
transform:translated(px ,px ,-px) rotateZ(deg);
}
在 x，y，z 上应用 translate3d 和 rotateZ 效果图
5.写一个墙角效果

<div class="cude">
<div class="common left">left</div>
<div class="common right">right</div>
<div class="common bottom">bottom</div>
</div>
.cude {
perspective: px;
width:px;
height:px;
position: relative;
margin: px auto;
transform-style: preserve-d;
transform: rotateX(-deg) rotateY(-deg);
}
.common {
position: absolute;
top: ;
left: ;
width: px;
height: px;
background:#666;
opacity: ;
font-size:px;
text-align: center;
line-height:px;
font-weight: bold;
color:#fff;
border:px solid #fff;
}
.right {
transform: rotateY(deg) translateZ(px);
background: rosybrown;
}
.left {
transform: rotateY(-deg) translateZ(px);
background: rosybrown;
}
.bottom {
transform: rotateX(deg) translateZ(-px);
}

墙角效果图
说明：写这个其实没有什么技巧，首先设置 transform-style: preserve-3d; 然后在理解每个面相对角度的基础上去设置 translateZ 和 rotate3d.

6. 经验分享
我们如果是初学 transform，这里介绍一个区分旋转角度方向的方法，也就是左手法则，我们左手指向设置旋转坐标的正向，例如 z 轴，左手只向屏幕外，手指自然弯曲的方向就是旋转的方向。

我们通常旋转都是以中心点为起点开始旋转的，这往往不是我们想要的方式，可以通过设置 transform-origin 这个属性改变旋转起始点的位置。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!