transform 2D 空间转换

发布时间：2023-03-18 13:59:32 所属栏目：教程来源：

导读：transform 2D 平面转换
在以前我们改变元素的位置需要设置 left 、 right 这类的属性，它对其它元素有很大的影响，现在通过 transform 就可以实现任意空间的改变了。

1. 官方解释
CSS transform 属性允许你旋转

transform 2D 平面转换
在以前我们改变元素的位置需要设置 left 、 right 这类的属性，它对其它元素有很大的影响，现在通过 transform 就可以实现任意空间的改变了。

1. 官方解释
CSS transform 属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。

2. 解释
transfrom 这个属性可以改变一个目标元素在页面中的位置，例如相对原来元素所在的位置平移，相对原来的尺寸放大或者缩小，也可以旋转或者斜切。

3. 语法
通用坐标轴说明:

x 代表横轴，y 代表纵轴。

坐标轴效果图
包含参数：

值   描述
translate(x,y)   可以改变元素的位置，而不会对相邻元素由影响。
translateX(x)   只改变元素的水平位置。
translateY(y)   只改变元素在竖直方向的位置。
scale(x,y)   元素缩放，x 代表水平方向，y 代表竖直方向。
scaleX(x)   仅对元素 x 方向上缩放。
scaleY(y)   仅对元素 y 方向上缩放。
skew(x-angle,y-angle)   定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)   定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)   定义沿着 Y 轴的 2D 倾斜转换。
rotate(angle)   在平面上旋转一个角度
4. 实例
接下来我们都是对 demo 这个元素进行操作。

<div class="demo"></div>
使用 translate 让元素位移。
.demo{
transform: translate(px,px);
}

`translate` 让元素位移效果图
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
perspective: px;
transform-style: preserve-d;
}
.commn{
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{
transform:translated(px ,px ,-px) rotateZ(deg);
}
</style>
</head>
<body>
<div class="commn demo">transfrom3d</div>
<div class="commn demo-3d">transfrom3d</div>
</body>
</html>
使用 translateX 让元素水平位移：
.demo{
transform: translateX(px);
}

`translateX` 让元素水平位移效果图
使用 translateY 让元素在竖直方向上位移：
.demo{
transform: translateY(px);
}

`translateY` 让元素水平位移效果图
使用 scale 对元素缩放：
.demo{
transform: scale(,);
}
scale 接受一个倍数大于 1 时候放大，小于 1 时候缩小。当 x，y 参数的值一样时，可以如下面这样写：

.demo{
transform: scale();
}
如果只需要对水平方向缩放，可以向下面这样写，竖直方向同理：

.demo{
transform: scaleX();
}

缩放效果图
使用 skew 对元素倾斜。
.demo{
transform:skew(deg,deg);
}
.demo{
transform:skew(deg,deg);
}

如果只是对一个方向斜切可以如下：

.demo{
transform:skewX(deg);
}
rotate 使元素旋转一个角度。在 2D 效果中它只接受一个参数角度，并沿着顺指针方向开始。
.demo{
transform:rotate(deg);
}

旋转效果图
5. 兼容性
IE   Edge   Firefox   Chrome   Safari   Opera   ios   android
9+   12+   28+   4+   6.1+   12.1+   7+   4.4
6. 场景
在需要动画渲染改变元素位置时候。
需要对场景进行缩放或者旋转时候。

（编辑：汽车网）

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