HTML和CSS学习-----2D转换模块

2D转换模块
tranform属性
其中有:
rotate()—实现旋转操作，括号中写旋转的角度大小（单位为deg）
translate(index,index)----实现平移操作，左边的参数表示水平方向，右边的参数表示垂直方向
scale(index,index)----实现缩放操作，左边的参数表示在水平方向上实现缩放，右边的参数表示在垂直方向上实现缩放
注意点：1.参数的取值大于1时表示放大，参数的取值小于1表示缩小。
2.当两个参数取值相同时，可以简写为一个
注意点：1.如果需要进行多个转换，那么用空格隔开即可
2.2D转换模块会修改元素的坐标系，所以旋转之后再平移就不是水平平移了
transform-origin属性
默认情况下所有的元素都是以自己的中心点作为参考来旋转的，我们可以通过形变中心点属性来修改它的参考点
transform-origin:index index----前一个参数表示在水平方向，后一个参数表示在垂直方向
注意点：取值有三种情况：① 具体像素 ② 百分比 ③特殊关键字
旋转轴向
默认情况下所有元素都是围绕z轴旋转的
总结：像围绕那个轴进行旋转，那么只需要在rotate后加一个该轴的大写字母即可
透视属性
perspective属性（近大远小）:设置的值越大，则近大远小越不明显；设置的值越小，则近大远小明显
注意点：透视属性必须添加到需要呈现近大远小效果的元素的父元素上面


不知道为啥，就算我不添加绝对定位这个条件，它第一张图转变的时候还是会被第二张图盖住
盒子阴影和文字阴影
1.如何给盒子添加阴影
box-shadow:h-shadow v-shadow blur spread color inset;
水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影
2.注意点
2.1 盒子的阴影分为内外阴影，默认情况下就是外阴影
2.2 快速添加阴影，只需要添加编写三个参数即可
box-shadow:水平偏移 垂直偏移 模糊度
默认情况下阴影的颜色和盒子内容的颜色一致
3. 如何给文字添加阴影
text-shadow：h-shadow v-shadow blur color
水平偏移 垂直偏移 模糊度 阴影颜色
opacity:0----表示这个元素的透明度为0
练习