本文介绍了CSS中的transform属性，详细讲解了其子属性如translate、rotate、skew和scale的功能，以及如何在选择器中使用它们进行元素的位移、旋转、倾斜和缩放操作。通过实例演示，帮助读者逐步掌握CSS变换技术。
根据前几章的内容，我们将进行对css的讲解。这时候就会有人问了，“哎呀css是什么呀，前几章也没有提到啊”，目前为止，你只要知道css就是相当于上一章所讲的选择器中的内容，即标签的属性。根据这一点，我们不难知道，我们本章所讲的内容要写到选择器里面，并且它可以改变html内容的样式。
本章所要讲的css内容如下：
transform 改变 位移、旋转、倾斜、缩放
1.位移
translate(tx,[ty])元素沿着x轴移动，如果ty有值,就沿着y轴运动
2.旋转
rotate(angle) 元素沿着z轴旋转 rotateX() 元素只沿着x轴旋转 rotateY() 元素只沿着y轴旋转 rotateZ() 元素只沿着z轴旋转 rotate3d(x,y,z,angle) 元素同时沿着x轴、y轴、z轴旋转
3.倾斜
skew(sx,[sy]) 元素沿着x轴倾斜，如果sy有值，就是既沿着x轴又沿着y轴倾斜 skewX(sx) 元素只沿着x轴倾斜 skewY(sy)
4.缩放
scale(sx,sy)元素既沿着x轴又沿着y轴缩放，值大于1是放大，值小于1是缩小；如果参数只要一个是宽高缩放比例相同 scaleX() 元素只沿着x轴缩放 scaleY() 元素只沿着y轴缩放 scaleZ() 元素只沿着z轴缩放 scale3d(x,y,z,angle) 元素同时沿着x轴、y轴、z轴缩放
同时使用多种变形效果，变形效果函数使用空格隔开，注意不要逗号隔开
设置变形中心点 transform-origin: x轴值(数值、预定义词(left right center)),y轴值(数值、预定义词(top bottom center))
开启3d透视(近大远小) perspective 其值是距离，值越小透视越明显 必须使用在父级元素上
3d背面是否可见 backface-visibility visible可见(默认) hidden隐藏
3d嵌套效果是否可见 transform-style flat(不保留元素的3d位置，默认) preserve-3d(保留元素的3d位置)
根据上面所描述的内容，我想大家现在已经头昏眼花，完全不知道怎么使用上面所讲的方法了，不急，让我们一步一步来讲解。
首先，我们可以把transform放到选择器中，如：
.wcy{
transform:
}
那么 transform有什么作用呢，什么很详细的进行了介绍：改变位移、旋转、倾斜、缩放
根据第一条： translate(tx,[ty])元素沿着x轴移动，如果ty有值,就沿着y轴运动。我们可以很清楚的了解到，如果我们可以用transform来将一个东西进行移动，操作如下：
<!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>
.wcy_1 {
translate: 30px;
}
</style>
</head>
<body>
<div class="wcy_1">大家</div>
<div class="wcy_2"> 好</div>
</body>
</html>
为了进行对比我将两者的截图展现出来：
根据上图，我们很清楚的看到“大家”两字向右进行了移动。
根据上面的介绍，其他内容的理解以此类推。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
