补充 CSS3笔记

最新推荐文章于 2024-06-25 11:27:33 发布

原创最新推荐文章于 2024-06-25 11:27:33 发布 · 182 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css #javascript

CSS3 选择器

1.1 属性选择器

1.2 结构伪类选择器

nth-child（n）

n可以是数字，关键字和公式
n如果是数字，就是选择第n个
常见的关键词 even 偶数 odd 奇数
常见的公式如下 ( 如果n是公式，则从0开始计算）
但是第0个元素或者超出了元素的个数会被忽略 )

2.3 伪元素选择器

before 和 after 必须有 content 属性
before 在内容的前面，after 在内容的后面
before 和 after 创建一个元素，但是属于行内元素。
因为在 dom 里面看不见刚才创建的元素，所以我们称为伪元素
伪元素和标签选择器一样，权重为 1

2. 2D 转换

转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果

移动：translate
旋转：rotate
缩放：scale

2.1 2D 转换之移动 translate

//语法
transform: translate(x,y); 或者分开写
transform: translateX(n);
transform: translateY(n);

定义 2D 转换中的移动，沿着 X 和 Y 轴移动元素
translate最大的优点：不会影响到其他元素的位置
translate中的百分比单位是相对于自身元素的 translate:(50%,50%);
对行内标签没有效果

2.2 2D 转换之旋转 rotate

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。

transform:rotate(度数)

//rotate里面跟度数， 单位是 deg 比如 rotate(45deg)
//角度为正时，顺时针，负时，为逆时针
//默认旋转的中心点是元素的中心点

2.3 2D 转换中心点 transform-origin

transform-origin: x y;

注意后面的参数 x 和 y 用空格隔开
x y 默认转换的中心点是元素的中心点 (50% 50%)
还可以给x y 设置像素或者方位名词（top bottom left right center）

2.4 2D 转换之缩放scale

缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小

transform:scale(x,y);

注意其中的x和y用逗号分隔
transform:scale(1,1) ：宽和高都放大一倍，相对于没有放大
transform:scale(2,2) ：宽和高都放大了2倍
transform:scale(2) ：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)
transform:scale(0.5,0.5)：缩小
sacle缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

3. 3D 转换

3.1 三维坐标系

x轴：水平向右注意： x 右边是正值，左边是负值
y轴：垂直向下注意： y 下面是正值，上面是负值
z轴：垂直屏幕注意：往外面是正值，往里面是负值

主要知识点

3D位移: translate3d(x,y,z)
3D旋转: rotate3d(x,y,z)
透视: perspective
3D呈现 transfrom-style

3.2 3D移动 translate3d

3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。

translform:translateX(100px)：仅仅是在x轴上移动
translform:translateY(100px)：仅仅是在Y轴上移动
translform:translateZ(100px)：仅仅是在Z轴上移动（注意：translateZ一般用px单位）
transform:translate3d(x,y,z)：其中 x、y、z 分别指要移动的轴的方向的距离

因为z轴是垂直屏幕，由里指向外面，所以默认是看不到元素在z轴的方向上移动

3.3 透视 perspective

在2D平面产生近大远小视觉立体，但是只是效果二维的

如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）。
模拟人类的视觉位置，可认为安排一只眼睛去看
透视我们也称为视距：视距就是人的眼睛到屏幕的距离
距离视觉点越近的在电脑平面成像越大，越远成像越小
透视的单位是像素

透视写在被观察元素的父盒子上面的

d：就是视距，视距就是一个距离人的眼睛到屏幕的距离。

z：就是 z轴，物体距离屏幕的距离，z轴越大（正值）我们看到的物体就越大。

3.4 translateZ

translform:translateZ(100px)：仅仅是在Z轴上移动。

有了透视，就能看到translateZ 引起的变化了.

translateZ：近大远小
translateZ：往外是正值
translateZ：往里是负值

3.5 3D旋转 rotate3d

3D旋转指可以让元素在三维平面内沿着 x轴，y轴，z轴或者自定义轴进行旋转

语法

transform:rotateX(45deg)：沿着x轴正方向旋转 45度
transform:rotateY(45deg) ：沿着y轴正方向旋转 45deg
transform:rotateZ(45deg) ：沿着Z轴正方向旋转 45deg
transform:rotate3d(x,y,z,deg)：沿着自定义轴旋转 deg为角度

3.6 3D呈现 transfrom-style

控制子元素是否开启三维立体环境。
transform-style: flat 子元素不开启3d立体空间默认的
transform-style: preserve-3d; 子元素开启立体空间
代码写给父级，但是影响的是子盒子
这个属性很重要，后面必用