css3之[2D转化,动画,3D转化] 彩蛋之3D立方体

• css3 新特性之2D

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);

• css3 新特性之动画

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;

• css3 新特性之3D

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);
}