一:2D转换:
定义:能够对元素进行移动、缩放、转动、拉长或拉伸.
transform:2D移动:translate(),translate(tx,ty)
也可以使用translateX(tx) 或者 translateY(ty)
2D缩放scale()
2D旋转:rotate():
2D翻转:skew()
transform-origin: 允许你改变被转换元素的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 100px;
height: 100px;
background-color: red;
margin-left: 200px;
margin-top:10px;
/*添加过渡效果 css样式名称 耗时*/
transition: transform 2s;
}
/*移动translate*/
div:first-of-type:active{
transform:translateY(300px);
}
/*缩放:scale*/
div:nth-of-type(2):active{
transform:scaleY(0.5);
}
/*旋转:rotate*/
div:nth-of-type(3){
background-color: purple;
transform-origin: left top;
}
div:nth-of-type(3):active{
transform: translateX(700px) rotate(-90deg);
}
/*斜切:skew*/
div:nth-of-type(4):active{
background-color: blue;
transform:skew(-30deg);
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
</html>