版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/z_x_Qiang/article/details/82821703
Transform （2D变形）
1.translate 平移
控制属性为x和y
控制xy属性的时候使用百分比的话，是相对自己的尺寸的；
移动的距离是相对当前盒子的显示位置的；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height:200px;
background-color: pink;
transition: all;
transition-duration: 500ms;
position: absolute;
left: 50%;
top: 50%;
/*以前的做法是设置负数的margin;但是这种需要计算;*/
/*margin-left: -100px;
margin-top: -100px;*/
/*现在的做法是直接使用transform ,这个百分度是相对自己的;*/
transform: translate(-50%, -50%);
}
div:active{
transform: translate(100px,200px); /*通常是和transition搭配使用的;这里的移动距离是相对盒子当前的位置*/
}
</style>
</head>
<body>
<div >
</div>
</body>
</html>2. 缩放scale
缩放的值小于1表示缩小，如果大于1表示放大
定义一个标签：
<section>
<img src="dongman.gif" alt="" />
</section>给标签加样式：
section{
width: 500px;
height: 260px;
margin: 0 auto;
overflow: hidden;
border: 5px solid red;
}
img{
transition: all;
transition-duration: 500ms;
}
section:hover img{
transform: scale(1.5);
}3.旋转rotate
正直为顺时针旋转，负值为逆时针旋转；
定义一个span设置下面这样的样式即可：
span{
display: block;
width: 100px;
height: 100px;
background-color: yellow;
transition: all;
transition-duration: 300ms;
}
span:active{
transform: rotate(-90deg);
}其实这种旋转是沿Z轴旋转的额，还可以使用rotatex rotatey 进行旋转 就成3D的效果了；
要想有3d效果需要加入一个透视属性，在父盒子中；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width:500px;
height:260px;
margin: 100px auto;
perspective: 500px;/*要在父盒子中添加这个属性：3d透视效果*/
}
img{
transition: all;
transition-duration: 300ms;
transform-origin: left;/*旋转的轴*/
}
img:active{
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div >
<img src="img/dongman.gif" alt="" />
</div>
</body>
</html>