HTML入门学习笔记--CSS 2D转换模块(10)

93-2D转换模块

格式

transform:取值;
rotate(45deg)  其中deg是单位, 代表多少度
translate(100px, 0px)  第一个参数:水平方向,第二个参数:垂直方向
scale(1.5)   第一个参数:水平方向
        第二个参数:垂直方向
        注意点:
        如果取值是1, 代表不变
        如果取值大于1, 代表需要放大
        如果取值小于1, 代表需要缩小
        如果水平和垂直缩放都一样, 那么可以简写为一个参数

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

注意点:

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

94-2D转换模块-形变中心点

transform-origin:

第一个参数:水平方向
第二个参数:垂直方向

注意点

取值有三种形式
具体像素    
百分比

94-2D转换模块-形变中心点

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

总结:想围绕哪个轴旋转, 那么只需要在rotate后面加上哪个轴即可

1.什么是透视(perspective属性)

近大远小

2.注意点

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

98-盒子阴影和文字阴影

1.如何给盒子添加阴影

box-shadow: 水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影;

2.注意点

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

3.如何给文字添加阴影

text-shadow: 水平偏移 垂直偏移 模糊度 阴影颜色 ;
opacity: 0;设置透明度 ;