随手笔记（2）

媒体+过渡+动画+2 3D

媒体查询

1.语法结构

@media 媒体设备 and （条件）{

​ 选择器{

​ 属性：值；

​ }

} ，

• @media 表示媒体查询

• screen 表示查询设备 媒体设备是个变量 在什么设备下就使用什么值

• speech 阅读设备 all 所有设备 screen 电脑手机平板

• and 链接符号 并列条件

• （屏幕条件）

• max-width:230px 在230px以下的尺寸中；使用媒体样式

• min-width:230px 表示在大于230px尺寸中使用媒体查询样式

• 总结 max 指的是屏幕最大时候也就是当屏幕小于最大屏幕时条件成立

​ min 屏幕最小时 也就是当屏幕大于最小屏幕时 条件成立

过渡

作用 在某个时间段可以显示css中某个属性值变化过程

• transition 有多个值

• 语法 transition 属性 时间 属性时间

• all 表示选中所有属性

• transition-property 表示过渡属性

• transition-duration 表示过渡属性所需时间

• transition-delay 过渡需要多少时间开始

动画

使用动画的流程

• 定义动画 @keyform

• 执行动画 animatio

3D 是立体空间 三维的 目的 如何在网站中实现立体效果

​ 方式

​ 1.建立立体思维方式 忘记平面

​ 2.找到标准轴原点，已经x y z 轴

​ x 网站水平方向 往右值越大

​ y 网站竖直方向 往下值越大

​ z 网站看不见的虚拟空间，越往里越虚拟值大

​ 原点以元素为基点 标准位置（默认） 视图窗口左上角

​ 3.根据属性沿着轴进行抽象样式

​ 3D 语法

​ 第一步 声明3D设置透视镜

​ body{

​ transform-style：prserve-3d；

​ }

​ 第二步 开始3d 效果

​ 注意 x y z 轴表示固定在浏览器上的 而是在元素上的 会随着元素的转动二转动

​ 要想实现正方体

​ 1 六个面 在2d 空间重合

​ 2 设置六个面为3d效果

​ 3 其中两个面进行x轴旋转90度 其中两个进行y轴旋转90度

​ 4 开始沿着z轴进行平移

​ 让立方体动起来

​ 1 设置父容器也算3d 效果

​ 2 让立方体动起来

2D

transform 向元素应用 2D 或 3D 转换。

translate()

• 元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数

rotate()

• 元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

实例

• 例如：值 rotate(30deg) 把元素顺时针旋转 30 度。

scale()

• 值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。

skew()

• 元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：

• 实例：值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。