2D转换模块

2D转换模块

• transform:rotate(45deg);_________旋转
• transform:translate(50px,0px);_______平移
• transform:scale(1.5,1);________缩放
  如果进行多次转换,中间用空格(不是逗号!)隔开
  2D的转换模块会修改元素的坐标系, 所以旋转之后再平移就不是水平平移的

形变中心点

• transform-origin:(可接受像素/百分比/特殊关键词三种取值)

旋转轴向

• transform:rotateY(45deg);
  想围绕哪个轴旋转, 那么只需要在rotate后面加上哪个轴即可

透视

• perspective:500px;__________近大远小 (要添加到他的父元素上)
  一定要注意, 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面

盒子阴影和文字阴影

1.如何给盒子添加阴影
box-shadow: 水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影;

2.注意点
2.1盒子的阴影分为内外阴影, 默认情况下就是外阴影
2.2快速添加阴影只需要编写三个参数即可
box-shadow: 水平偏移 垂直偏移 模糊度;
默认情况下阴影的颜色和盒子内容的颜色一致

3.如何给文字添加阴影
text-shadow: 水平偏移 垂直偏移 模糊度 阴影颜色 ;