CSS-2D转换模块以及阴影属性

旋转: transform: rotate(45deg); /其中deg是单位, 代表多少度/
平移: transform: translate(100px, 0px);第一个参数:水平方向
第二个参数:垂直方向
缩放 :transform: scale(0.5, 0.5);
第一个参数:水平方向
第二个参数:垂直方向

注意点:
如果取值是1, 代表不变
如果取值大于1, 代表需要放大
如果取值小于1, 代表需要缩小
如果水平和垂直缩放都一样, 那么可以简写为一个参数
transform: scale(1.5);

连写格式:

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

• 注意点:

1. 如果需要进行多个转换, 那么用空格隔开
2. 2D的转换模块会修改元素的坐标系, 所以旋转之后再平移就不是水平平移的

-形变中心点

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

• transform-origin: left top
  第一个参数:水平方向
  第二个参数:垂直
  注意点:
  取值有三种形式
• 具体像素
• 百分比
• 特殊关键字

-旋转轴向

默认情况下所有元素都是围绕Z轴进行旋转

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

透视属性(近大远小)

perspective: 500px;

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

盒子阴影和文字阴影

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

• 注意点:
  1. 盒子的阴影分为内外阴影, 默认情况下就是外阴影
  2. 快速添加阴影只需要编写三个参数即可

box-shadow: 水平偏移 垂直偏移 模糊度;
默认情况下阴影的颜色和盒子内容的颜色一致

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