注意:transform是复合属性,拆开写会替代,先平移再旋转和先旋转再平移的结果是不同的
1. CSS3 转换:transform属性可以对元素进行移动、缩放、转动、拉长或拉伸
注意: Internet Explorer 9 要求前缀 -ms- 版本,Internet Explorer 10, Firefox, 和 Opera支持transform 属性,Chrome 和 Safari 要求前缀 -webkit- 版本。
2. 旋转:transform: rotate();——必须是块元素
(1)以x、y、z轴进行旋转,默认是z轴;
(2)rotateX()、rotateY()、rotateZ()
(3)()内的值单位是:deg角度
比如:transform: rotate(45deg);
(4)还有一种复合写法:rotate3d(x,y,z,angle)
空间直角坐标系(x,y,z)和原点确定一个轴,然后在该轴上旋转angle的角度
比如:transform: rotate3d(1,1,1,45deg);
注意:
第一种方法:再执行rotateX()后的图形,再执行rotateY()
第二种方法:直接在确定的轴上进行角度旋转
两种方法得到的结果是不一样的
3. 缩放:transform:scale()
值的绝对值>1,就是放大,比如2,就是放大2倍
值的绝对值 0<值<1,就是缩小,比如0.5,就是原来的0.5倍;
值的正负,负值表示图形翻转。
默认情况下,scale(x, y):以x/y轴进行缩放;如果y没有值,默认y==x;
也可以分开写:scaleX() scaleY() scaleZ(),分开写的时候,可以对Z轴进行缩放
第二种写法:transform:scale3d(x, y, z)该写法是上面的方法的复合写法,结果和上面的一样。
比如:transform: scaleX(1.8);
4. 倾斜拉伸:skew(x,y),单位:角度deg
如果只有一个参数,y == 0
分开写:skewX()和skewY()
正值:将图中的线拉伸
比如:transform: skewX(30deg);
比如:transform: skewY(30deg);
5. transform:translate()平移
transform:translate(20px):一个值的时候,表示水平方向的平移20px,垂直方向0px;两个值的时候,水平方向和垂直方向分别平移。
transform:translateX()、transform:translateY()、transform:translateZ(),注意Z轴的平移是面向屏幕的
transform:translate3d(x, y, z):三个值分别对应三个方向
比如:transform: translate3d(50px, 30px, 20px);
6. transform-origin:改变图形的中心点
当图形的中心点改变后,图片的旋转会受到影响;
中心的默认值:50% 50%,即图形x轴、y轴的50%的位置,这里的百分比是以图形原来盒子长度决定的。包括border、padding、content区
比如:
.demo1{
width: 100px;
height: 100px;
padding: 20px 0px;
border: 10px solid black;
position:absolute;
top: 100px;
left: 100px;
background: green;
transform-origin: 0% 0%;
transform: rotate(30deg);
}
关键词 | 百分比 |
top = top center = center top | 50% 0% |
right = right center = center right | 100% 50% |
bottom = bottom center = center bottom | 50% 100% |
left = left center = center left | 0% 50% |
center = center center | 50% 50% |
top left = left top | 0% 0% |
top right = right top | 100% 0% |
bottom right = right bottom | 100% 100% |
bottom left = left bottom | 0% 100% |
7. transform-style:preserve-3d;保留3d效果
比如:
<!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>
<style>
#div1 {
position: relative;
height: 200px;
width: 200px;
margin: 100px;
padding: 10px;
border: 1px solid black;
}
#div2 {
padding: 50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotateY(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(60deg); /* Safari and Chrome */
-webkit-transform-style: preserve-3d; /* Safari and Chrome */
}
#div3 {
padding: 40px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateY(-60deg);
-webkit-transform: rotateY(-60deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">HELLO
<div id="div3">YELLOW</div>
</div>
</div>
</body>
</html>