用transform对元素进行2D、3D变形，变形只对块级元素有效。
transform的基本属性及属性值：
transform: rotate(270deg); /*rotate 是旋转，rotate(270deg)是旋转270度*/
transform: translateX(300px);/*translate 是平移，可以向X、Y两个方向平移*/
transform: translateY(200px);
transform: translate(300px,300px);/*translate 有两个值时，可以向X、Y两个方向平移，不过是斜着移动*/
transform: skewX(45deg);/*skew 是斜切，可以向X、Y两个方向斜切*/
transform: skewY(45deg);
transform: skew(45deg,45deg);/*skew 有两个值时，代表分别沿向X、Y两个方向斜切*/
transform: scale(0.5);/*scale 是缩放，scale也有X、Y两个缩放方向*/
transform-origin: top left;
transform-origin: 10px 10px;/*transform-origin 是改变基点，以某一点为基点进行旋转，缩放
值可以是top left，也可以是10px 10px这样的值，也可以是百分比*/
可以用如下代码做一些测试：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body{
width: 60%;
height: 60%;
border: 1px solid;
margin: 100px auto;
}
.test{
width: 100px;
height: 100px;
border: 1px solid;
border-radius: 50%;
background-color: pink;
margin: 200px auto;
font: 30px/100px "微软雅黑";
text-align: center;
transform-origin: top left;/*transform-origin 是改变基点，以某一点为基点进行旋转，缩放
值可以是top left，也可以是10px 10px这样的值，也可以是百分比*/
transform-origin: 10px 10px;
}
body:hover .test{
transform: rotate(270deg); /*rotate 是旋转，rotate(270deg)是旋转270度*/
transform: translateX(300px);/*translate 是平移，可以向X、Y两个方向平移*/
transform: translateY(200px);
transform: translate(300px,300px);/*translate 有两个值时，可以向X、Y两个方向平移，不过是斜着移动*/
transform: skewX(45deg);/*skew 是斜切，可以向X、Y两个方向斜切*/
transform: skewY(45deg);
transform: skew(45deg,45deg);/*skew 有两个值时，代表分别沿向X、Y两个方向斜切*/
transform: scale(0.5);/*scale 是缩放，scale也有X、Y两个缩放方向*/
}
</style>
<body>
<div class="test">
老虎
</div>
</body>
</html>
transform的相互组合：
如图：有两个相同大小格式的div，分别名为test1、test2，给这两个元素设置transform效果，分别为：transform: translateX(100px) scale(2);和transform: scale(2) translateX(100px);
出来的偏移效果却是不一样的。效果如图：
这是因为transform的rotate、scale、translate等都是以矩阵为原理计算的，所以在相互组合时，矩阵不满足交换律，所以偏移效果会出现不同。而且test1、test2在水平方向的偏移都不是100px，具体偏移量是根据translate*scale结果来算的，而且这种组合时从右向左顺序来计算的。transform: translateX(100px) scale(2)在计算偏移量是是按照scale（2）*translate（100px）的矩阵来算结果的。
网友评论