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之间是半透明。
