囊空不办寻春马,眼乱行看择婿车。
transform
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变换</title>
<link rel="stylesheet" href="transform.css" />
</head>
<body>
<div class="box">one</div>
</body>
</html>
.box{
box-sizing: border-box;
width: 150px;
margin: 0 2em;
padding: 60px 0;
text-align: center;
background-color: hsl(150,50%,40%);
}
rotate
旋转元素 rotateX、rotateY、rotateZ围绕不同的轴去旋转元素,我们给元素设置rotate(30deg),元素就会绕着元素自生的中心旋转30deg。
.box{
transform: rotate(30deg);
}
如果单独指定rotateX(180deg),元素就会翻转过来
可以指定backface-visibility: hidden;翻转180度就会不显示。翻转的时候可以指定不同的透视距离,perspective和透视的视角perspective-origin
translate
平移元素,元素会向右平移40px,然后在向下平移20px。
transform: translate(40px,20px);
scale
缩放元素,将元素进行缩放
transform: scale(0.4);
skew
倾斜元素
transform: skew(15deg);
transform-origin
默认元素变换都是从元素的中心变换的,transform-origin可以设置元素的变换中心点
多重变换
transform:rotate(15deg),translate(15px,0);
多重变换,是按照从右往左的顺序执行的,这里会先执行向右平移15px,然后向左旋转15度。