首先可以给两个宽高各为200px盒子，一个盒子的背景颜色为pink（粉色）一个盒子的背景颜色为orange（橙色），给它们都设置外边距距离上面有200px左右为auto。这样我们给橙色盒子设置css动画看着会明显一些。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS动画与变形</title>
<style>
div{
width:200px;
height:200px;
}
div.box1{
background:pink;
margin:200px auto 0px;
}
div.box2{
background:orange;
margin:-200px auto;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
效果：
CSS动画的属性和属性值
| 属性 | 属性值 |
| transform | translate() |
| rotate() | |
| scale() | |
| skew() |
为了方便看效果可以加一个active的伪类，点击的时候显示
- translate（）
代码：
正数值
div.box2:active{
transform:translate(200px,200px);
}
负数值
div.box2:active{
transform:translate(-200px,-200px);
}
解析：transform:translate(x轴,y轴)属性值是设置元素平移的效果,正数值是右下移动。负数值是左上移动。如果想只设置一个方向的数值x或者y可以在translate属性后面加一个X者Y就比如：translateX / translateY这样就可以了。
效果图：
- rotate（）
代码：
正数值
div.box2:active{
transform:rotate(60deg);
}
负数值
div.box2:active{
transform:rotate(-60deg);
}
解析：transform:rotate()是设置元素旋转的效果，正数值是顺时针的方向旋转，负数值是逆时针方向旋转。默认的原点是中性点，如果想要改变元素旋转的原点可以用transform-origin这个属性
代码：
div.box2:active{
transform-origin:left top;
transform:rotate(-60deg);
}
解析：transform-origin是设置元素旋转的原点，需要在哪个原点旋转就写上属性值比如左上角就是transform-origin:left top;
效果图：
- scale（）
代码：
div.box2:active{
transform:scale(2,1);
}
解析：transform:scale(x轴,y轴)属性是设置元素大小的缩放，填写的值乘元素本身的宽高就是缩放后的宽高了，如果只想设置一个轴的宽或高可以在scale属性后面加一个X或者Y就比如：scaleX / scaleY这样就可以了。
效果图：
- skew（）
代码：
正数值
div.box2:active{
transform:skew(30deg,30deg);
}
负数值
div.box2:active{
transform:skew(-30deg,-30deg);
}
解析：transform:skew(x轴,y轴)属性是设置元素倾斜角度，正负数倾斜的方向是相反的。如果只想设置一个轴的宽或高可以在skew属性后面加一个X或者Y就比如：skewX / skewY这样就可以了，或者可以直接只写一个值比如：skew(60deg)这样另外一个轴默认为零。
效果图：
2010
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
