css3新增属性变形

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度，各个之间用空格隔开。