2D转换模块

正常的 旋转的transform:rotate(45deg);  deg单位代表多少度

平移的transform:translate(100px,0px);  (水平方向移动，垂直方向移动)

缩放的transform:scale(1.5,1);  (水平方向移动，垂直方向移动)

如果水平和垂直都一样可以简写为    transform:scale(1.5);

综合的 transform:rotate(45deg) translate(100px,0px) scale(1.5);

注意点：1、如果需要进行多个转换，那么用空格隔开

2、2D的转换模块会修改元素的坐标系，所以旋转之后再平移就不是水平平移的

形变中心点

transform-origin: 水平方向 垂直方向；

取值有： 像素  百分比  特殊关键字（left/center/right  top/center/bottom）

默认情况下所有元素都是以自己的中心点作为参考来旋转的, 我们可以通过形变中心点属性来修改它的参考点

旋转轴向

想围绕哪个轴旋转，那么只需要在rotate后面加上哪个轴即可。

transform:rotateZ();  默认的

transform:rotateX();

transform:rotateY();

过场动画和过渡动画区别

透视属性 近大远小

perspective:500px;  后面的这个像素 是指距离这个物理的距离

注意点：透视属性必须添加到需要呈现近大远小效果的元素的父元素上面

盒子阴影和文字阴影

盒子的阴影

box-shadow:水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影；

注意点1、盒子的阴影分为内外阴影，默认情况下就是外阴影

2、快速添加阴影只需要编写三个参数即可

box-shadow:水平偏移 垂直偏移 模糊度；

默认情况下阴影的颜色和盒子内容的颜色一致

文字的阴影

如何给文字添加阴影

text-shadow:水平偏移 垂直偏移 模糊度 阴影颜色；

注意点：快速添加阴影只需要编写三个参数即可

text-shadow:水平偏移 垂直偏移 模糊度；

默认情况下阴影的颜色和文字的颜色一致

翻转的菜单

ul>li{菜单名}*5

/*设置透明度 0透明  1不透明*/

opacity:0;

定位的元素会覆盖没有定位的元素