今天突然想到面试的时候被问道这个问题，居然没回答上来，心中无比愤懑，于是就诞生了这篇干货。好啦，进入正题了，下来我们就来介绍transform属性：
在css3中 transform属性主要包括以下值：旋转rotate、扭曲skew、缩放scale、移动translate、以及矩阵变形matrix
一、旋转rotate:
rotateX()：绕X轴旋转某度
rotateY()：绕Y轴旋转某度
rotate()：参数为正时，顺时针旋转某度；参数为负时，逆时针旋转某度
看个小栗子(参数均为数字+deg，表示多少度)：
<style>
div{
border: 1px solid grey;
}
p{
width:150px;
height: 150px;
float: left;
margin:200px 100px;
}
p.one{
background-color: blue;
transform: rotate(20deg);
}
p.two{
background-color: pink;
}
p.three{
background-color: green;
}
</style>
</head>
<body>
<div>
<p class="one">1</p>
<p class="two">2</p>
<p class="three">3</p>
</div>
</body>
顺时针旋转了20度；
当我们将属性改变为transform:rotateX(50deg)时，显示效果如下：
这是因为X轴相当于显示器的横轴，Y轴相当于显示器的纵轴，绕横轴旋转的时候图片变为倾斜的，视角看到的相当于投影，高度变小
当我们将属性改变为transform:rotateX(50deg)时，显示效果如下（原因同上）：
二、移动translate
translateX()：向x轴水平移动
translateY()：向y轴水平移动
translate()：传递一个参数时，表示向x轴和Y轴移动的距离相同；两个参数时，第一个参数是x轴移动的距离，第二个参数是Y轴移动的距离，当距离为正的时候向右和向下，距离为负时向上和向左
代码和上面相同，transform设置为：
transform: rotate(20deg) translate(20px,-50px);
未设置属性之前的效果：
设置translate属性之后：
由上面的图比对，很明显第一张图片向上和向右移动了
三、缩放scale
scaleX()：横轴方向缩放多少倍，纵轴方向不变
scaleY()：横轴方向不变，纵轴方向缩放多少倍
scale():传递一个参数时，横轴和纵轴方向缩放倍数相同，传递两个参数时第一个表示横轴缩放的倍数第二个表示纵轴缩放的倍数
看一个小栗子：在第二个结果的基础上继续改变
transform: rotate(20deg) translate(20px,-50px) scale(0.5,0.5);显示效果如下：
由图知道，我们将第一张图片横轴和纵轴方向各缩小了二分之一
四、扭曲skew
skewX()：按给定的参数沿X轴倾斜变换
skewY()：按给定的参数沿Y轴倾斜变换
skew()：如果只传一个参数，那么默认第二个参数为0，只沿X轴变换；如果传两个参数，第一个沿X轴变换，第二个沿y轴变换
下面来看小栗子：
不添加transform属性图：
改变属性结果图：
transform:skew(20deg);
五、matrix(a,b,c,d,e,f)：
这个有点复杂，实在不想介绍了（手动捂脸）；
六，关于元素基点
上面说的情况无论是旋转，扭曲，移动这些都是围绕一个点进行的，默认是元素中心位置，我们可以使用transform-origin的值来改变元素基点位置，常用值有以下几种情况：
“top left”：（0,0）
“top”等价“top center” ：（0.5,0）
“right top”：（1,0）
“left”等价“left center”：（0,0.5）
“right”等价“right center”：（1,0.5）
“bottom left”：（0,1）
“bottom”等价“bottom center”：（0.5,1）
“bottom right”：（1,1）
center：（0.5,0.5）默认
注意：同一个字符串中将两个参数的值位置交换，显示效果一样
扫一扫
2209
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
