2D转换模块

2017-01-09 本文已影响0人白的吓人

正常的旋转的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;

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