1. 2D转化-位移
语法:
/* 1.单个写 */
/* 转换 transform*/
/* 沿着X轴方向移动 translateX*/
transform: translateX(-100px);
transform: translateY(100px);
/* 相当于自身宽度 */
transform: translateX(100%);
/* 参考与自身的高度 */
transform: translateY(100%);
/* 2.合起来写 两个参数 X Y */
transform: translate(50px, 50px);
transform: translate(100%, 100%);
transform: translate(-50%, -50%);
与定位有什么区别:
- 影响页面布局,影响其他盒子的位置;
- 移动不会,对行内元素不生效;
2. 2D转化-旋转
语法:绕着
/* rotate:旋转 ,正值 顺时针 单位deg*/
/* transform: rotate(45deg); */
/* transform: rotate(-45deg); */
下拉三角
/* 225 = 45+180 */
transform: rotate(225deg);
- 行内元素,
- content属性不能丢;
- div::before:hover不能这样用;用法:div:hover::before
- **只能用在双标签上
3. 2D转化-中心点
语法:
/* 语法 */
/* transform-origin: 0 0; */
/* transform-origin: 100% 100%; */
/* transform-origin: left bottom; */沿着左下点
/* 单个参数 默认第二个参数50%*/
transform-origin: 100px;
4. 2D转化-缩放
语法:
/* 放大,一个参数,宽度高度都是一个缩放比 */
/* transform: scale(2); */
/* x:宽度方向的缩放 y:高度 */
transform: scale(2, 3);
下面的所有元素、文字、属性都会被跟着缩放;
5. 2D转化-简写
语法:
transform: translate(600px, 0) rotate(45deg) scale(1.5); 先移动再旋转 在缩放
/* 如果 旋转写在前面,会改变初始化轴
transform: rotate(45deg) translate(600px, 0) scale(1.5);
1. 动画-定义
语法:
-
1.定义动画 @keyframes、
-
2.调用 animation-name 、
-
3.给时间 animation-duration
/* 1.定义动画 */ @keyframes donghua { from { /* 里面就是写平时CSS代码。不单单是局限于transform */ transform: translateX(0); background-color: #222; } to { transform: translateX(600px); background-color: red; } } div { width: 200px; height: 200px; background-color: #222; /* 2.调用 */ animation-name: donghua; /* 3.时间 */ animation-duration: 3s; }
2. 动画-序列
语法:时间节点
@keyframes dongh_hua {
/* ------------------------------------两个状态 节点里写 CSS代码*/
/* from
} */
/* to {} */
/* ------------------------------------多状态 实现更为精细的控制 */
/* 时间节点:时间到了百分数的状态 */
0% {
transform: translateX(0px);
}
50% {
transform: translateX(800px);
}
100% {
/* 多状态控制,transform是在上一个状态的基础上进行变化 */
/* transform: translateX(800px) translateY(600px); */
transform: translate(800px, 600px);
}
}
3. 动画-属性
/* 1.速度曲线:匀速 最为常用 连续的变化*/
/* animation-timing-function: linear; */
/* animation-timing-function: ease; */
/* animation-timing-function: ease-in-out; */
/* 分为几小步去完成,跳跃性的完成 */
animation: dongh 2s steps(2) forwards;
/* 2.设置等待 */
animation-delay: 1s;
/* 3.设置播放次数 */
/* animation-iteration-count: 2; */
/* infinite:无限 */
/* animation-iteration-count: infinite; */
/* 4.播放方向 */
/* animation-direction: reverse; */
/* animation-direction: alternate; 0-100-0 设置多次播放*/
/* 5.设置终点位100% 是否停留在这,设置无限的时候,该终点位状态属性不生效 */
/* animation-fill-mode: forwards; */
/* 设置等待的状态位 ,让盒子在0%状态等着 */
/* animation-fill-mode: backwards; */
/* 设置both:等待的时候 在0% 结束的时候在100% */
animation-fill-mode: both;
/* 鼠标悬浮的时候,状态暂停 */
animation-play-state: paused;
1. 3D转化-位移
/* 1. 单独 移动 X Y方向 */
/* 沿着 X 轴方向 移动 */
/* transform: translateX(100px); */
/* transform: translateY(100%); */
/* 2.合起来 */
/* transform: translateX(100px) translateY(100%); */
/* 3.简写 */
/* 2D :translate(x,y) */
/* 2D :translate3d(x,y,z) */
/* transform: translate3d(100px, 100%, 0); */
/* 4.Z方向 */
/* 沿着 Z 轴 正方向 移动100px */
/* transform: translateZ(100px); */
/* 没有厚度,不生效 */
transform: translateZ(100%);
2. 3D转化-视距
语法:perspective: 1000px;
- 作用:产生透视感,近大与小;
- 值不同:越小,变化越剧烈;
- 加给谁:
- body:以body视角进行观测,形成统一的透视感
- 各自父亲:各自形成透视感,相互之间;
3. 3D转化-旋转
语法:绕着;左手工具:把轴向朝向你的眼睛;
/* 1.单独绕着某个轴 左右工具配合 */
/* transform: rotateX(45deg); */
/* transform: rotateY(90deg); */
/* transform: rotateZ(90deg); */
/* 2.自定义轴(了解) 向量坐标 1, 1, 0 没有具体长度,就是代表一个刻度*/
transform: rotate3d(1, 1, 0, 45deg);
4. 3D转化-3D呈现
/* 3D 呈现 */
transform-style: preserve-3d;
- 作用:**给下面亲生的子元素开启3D空间;**
- 加给谁:亲生父亲;(只要你下面子元素要做3D转化)
5. 3 D转化-缩放
/* transform: scaleX(2); */
/* transform: scaleY(0.5); */
/* 没有厚度 */
/* transform: scaleZ(1); */
/* 简写 */
/* transform: scale3d(2, 2, 50); */
6. 3D转化-案例-立方体
/* 1.s_1:沿着 Z 轴 移动 150px ,*/
/* 1.1 发现子元素 做了3D转化,但是没有3D权限,找亲生父亲 */
.s_1 {
transform: translateZ(150px);
}
/* 2:s_2:沿着 X 移动 -150px ; 绕着 Y轴 逆时针 90deg*/
.s_2 {
transform: translateX(-150px) rotateY(-90deg);
}
/* 3 s_2:沿着 Z 轴 移动 -150px; 绕着 Y轴 180deg */
.s_3 {
transform: translateZ(-150px) rotateY(180deg);
}
/* s_4: 绕着 Y轴 顺时针 90deg ; 沿着Z轴方向 移动150px ,改变初始化轴向*/
.s_4 {
transform: rotateY(90deg) translateZ(150px);
}