2D转换模块

• 格式：transform：值；
• 取值：
  • transform: rotate(45deg);（顺时针旋转45度,deg是单位代表多少度）
  • transform: translate(100px, 0px)（平移。第一个参数:水平方向， 第二个参数:垂直方向）
  • transform: scale(1,0.5);（缩放。第一个参数:水平方向,第二个参数:垂直方向）

• 注意：
• transform: scale（1.5）
  如果取值是1, 代表不变。如果取值大于1, 代表需要放大。如果取值小于1, 代表需要缩小。如果水平和垂直缩放都一样, 那么可以简写为一个参数。
• transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5);
  如果需要进行多个转换, 那么用空格隔开。
  2D的转换模块会修改元素的坐标系, 所以旋转之后再平移就不是水平平移的

形变中心点

• 默认情况下所有的元素都是以自己的中心点作为参考来旋转的, 我们可以通过形变中心点属性来修改它的参考点
• 格式：
• transform-origin: left top;（第一个参数:水平方向，第二个参数:垂直方向）
• 注意：
• 取值有三种形式：
  • 具体像素
  • 百分比
  • 特殊关键词
• 事例：
  形变中心点没有改变时

形变中心点改变成transform-origin: left top;时

旋转轴向

• 默认情况下所有元素都是围绕Z轴进行旋转transform: rotateZ(45deg);

• 如图

  
  
• transform: rotateX(45deg);添加X就是围绕坐标X轴进行旋转

• 如图

  
  
• transform: rotateY(45deg);添加Y就是围绕坐标Y轴进行旋转
• 如图

• 总结: 想围绕哪个轴旋转, 那么只需要在rotate后面加上哪个轴即可
• perspective: 500px;（透视属性）
• 进行X或Y轴旋转时加上的属性。
• 什么是透视：近大远小
• 注意：一定要注意, 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面

盒子阴影和文字阴影

• 如何给盒子添加阴影：
• box-shadow: 水平偏移（数值） 垂直偏移（数值） 模糊度（数值） 阴影扩展（数值） 阴影颜色 内外阴影（默认外阴影，inset内阴影）;
• 注意：
• 盒子的阴影分为内外阴影, 默认情况下就是外阴影
• 快速添加阴影只需要编写三个参数即可
  box-shadow: 水平偏移 垂直偏移 模糊度;
• 默认情况下阴影的颜色和盒子内容的颜色一致
• 如何给文字添加阴影
• text-shadow: 水平偏移 垂直偏移 模糊度 阴影颜色 ;

设置透明度

• 格式：opacity: 0;
• 注意：取值0是透明，取值1是不透明，取值0到1之间是半透明。