css3新增属性变形，属性是translate

它有移动，缩放，旋转，倾斜这三个分支。

移动的属性值是translate

横向移动是

transform:translateX(x)

纵向移动是

transform:translateY(y)

一次性设置横轴与纵轴

 transform:translate(x,y)

比如设置一个div，类名是d1

css基础设置如下

<style>
		.d1 {
			width: 300px;
			height: 200px;
			border:1px red solid;
			margin: 20px;

		}
</style>

如果要设置横向移动100像素

<style>
		.d1 {
			width: 300px;
			height: 200px;
			border:1px red solid;
			margin: 20px;
            
            tranform:translateX(100px)
		}
</style>

要设置纵向移动50像素

<style>
		.d1 {
			width: 300px;
			height: 200px;
			border:1px red solid;
			margin: 20px;
            
            tranform:translateY(50px)
		}
</style>

如果要同时设置横向移动和纵向移动，这两个属性不能同时用，只能用一个。要实现效果语法格式如下面代码

<style>
		.d1 {
			width: 300px;
			height: 200px;
			border:1px red solid;
			margin: 20px;
            
            tranform:translate(100px,50px)
		}
</style>

缩放的语法格式是

translate:scale

    横向缩放
    transform:scaleX(x)
    纵向缩放
    transform:scaleY(y)
    同时设置横向缩放与纵向缩放
    transform:scale(x,y)

比如说横向缩放2倍

<style>
		.d1 {
			width: 300px;
			height: 200px;
			border:1px red solid;
			margin: 20px;
            
            translate:scaleX(2);
		}
</style>

设置纵向缩放2倍

<style>
		.d1 {
			width: 300px;
			height: 200px;
			border:1px red solid;
			margin: 20px;
            
            translate:scaleY(2);
		}
</style>

同时设置横向缩放，纵向缩放

<style>
		.d1 {
			width: 300px;
			height: 200px;
			border:1px red solid;
			margin: 20px;
            
            translate:scale(1,0.5);
		}
</style>

旋转的语法是

旋转：rotate
语法：
transform:rotate(度数)

比如说要旋转45度

代码如下

<style>
		.d1 {
			width: 300px;
			height: 200px;
			border:1px red solid;
			margin: 20px;
            
            translate:rarate(45deg);
		}
</style>

度数用deg表示

倾斜的属性是skew

横向倾斜是skewX（x）

纵向倾斜是skewY(y)

同时设置横向倾斜与纵向倾斜skew(x,y)

里面的值是度数

<style>
		.d1 {
			width: 300px;
			height: 200px;
			border:1px red solid;
			margin: 20px;
            
            translate:skewX(45deg);
		}
</style>

<style>
		.d1 {
			width: 300px;
			height: 200px;
			border:1px red solid;
			margin: 20px;
            
            translate:skewY(45deg);
		}
</style>

<style>
		.d1 {
			width: 300px;
			height: 200px;
			border:1px red solid;
			margin: 20px;
            
            translate:skew(45deg,45deg);
		}
</style>

上面三个css代码分别设置横向倾斜45度，纵向倾斜45度，同时设置横向与纵向倾斜45度

这几个属性可以同时写

transform: translate(100px,50px) rotate(30deg) skew(10deg);

上面的css代码表示同时设置横向移动100像素，纵向移动50像素，旋转30度，倾斜10度，各个之间用空格隔开。