2D\3D\动画\过渡

CSS3 2D转换

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

translate移动

• x 就是 x 轴上移动
• y 就是 y 轴上移动

transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)

2D 的移动主要是指 水平、垂直方向上的移动

translate 最大的优点就是不影响其他元素的位置

translate 中的%，是相对于本身的宽度和高度来进行计算的

行内标签没有效果

div {
  background-color: lightseagreen;
  width: 200px;
  height: 100px;
  /* 平移 */
  /* 水平垂直移动 100px */
  /* transform: translate(100px, 100px); */

  /* 水平移动 100px */
  /* transform: translate(100px, 0) */

  /* 垂直移动 100px */
  /* transform: translate(0, 100px) */

  /* 水平移动 100px */
  /* transform: translateX(100px); */

  /* 垂直移动 100px */
  transform: translateY(100px)
}

让一个盒子水平垂直居中

<style>
  div {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: pink;
  }

  p {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    background-color: purple;
    /* margin-top: -100px;
    margin-left: -100px;     盒子往上走自己高度的一半     用下面的%形式代替*/
    transform: translate(-50%, -50%);
  }
</style>
<div>
  <p></p>
</div>

rotate旋转

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

/* 单位是：deg */
transform: rotate(度数) 

rotate 里面跟度数，单位是deg

角度为正时，顺时针，角度为负时，逆时针

默认旋转的中心点是元素的中心点

img {
  width: 150px;
  border-radius: 50%;
  border: 5px solid pink;
  /* 过渡写到本身上，谁做动画给谁加 */
  transition: all 0.3s;
}
img:hover {
  transform: rotate(360deg)
}

鼠标放上箭头变成向上

下箭头可以是正方形边框旋转45度再去掉两个边

div {
  position: relative;
  width: 249px;
  height: 35px;
  border: 1px solid #000;
}

div::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 15px;
  width: 10px;
  height: 10px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  transform: rotate(45deg);
  transition: all 0.2s;
}
/* 鼠标经过div  里面的三角旋转 */
div:hover::after {
  transform: rotate(225deg);
}

转换中心点

设置元素转换的中心点

transform-origin: x y;

默认中心点为元素中心 50%， 50% / center center

x y可以是px也可以是top bottom left right center

//案例：鼠标经过盒子时以左下角为中心逆时针转上来一个盒子
div {
  height: 100px;
  width: 100px;
  background-color: pink;
  overflow: hidden;
  margin: 50px auto;
}
div::before {
  content: '';
  display: block;
  top: 100px;
  left: 0;
  height: 100px;
  width: 100px;
  background-color: purple;
  transform-origin: left bottom;
  transform: rotate(180deg);
  transition: all 0.5s;
}
div:hover::before {
  transform: rotate(0deg);
}

.father {
  position: relative;
  height: 100px;
  width: 100px;
  background-color: pink;
  overflow: hidden;
}
.son {
  position: absolute;
  top: 100px;
  left: 0;
  height: 100px;
  width: 100px;
  background-color: purple;
  transform-origin: top left;
  transition: all 0.4s;
}
.father:hover .son {
  transform: rotate(-90deg);
}
</style>
<div class="father">
	<div class="son"></div>
</div>

scale缩放

transform: scale(x, y)

注意，x 与 y 之间使用逗号进行分隔

transform: scale(1, 1): 宽高都放大一倍，相当于没有放大

transform: scale(2, 2): 宽和高都放大了二倍

transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致

transform:scale(0.5, 0.5): 缩小

scale 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

div:hover {
  /* 注意，数字是倍数的含义，所以不需要加单位 */
  /* transform: scale(2, 2) */

  /* 实现等比缩放，同时修改宽与高 */
  /* transform: scale(2) */

  /* 小于 1 就等于缩放*/
  transform: scale(0.5, 0.5)
}

//案例：分页号在鼠标放上时变大一圈
li {
  float: left;
  width: 50px;
  height: 50px;
  border: 2px solid red;
  border-radius: 25px;
  list-style: none;
  text-align: center;
  line-height: 50px;
  margin: 0 10px;
  transition: all 0.3s;
}
li:hover {
  transform: scale(1.1);
}

2D 转换综合写法以及顺序问题

同时使用多个转换，其格式为 transform: translate() rotate() scale()

顺序会影响到转换的效果(先旋转会改变坐标轴方向)。所以要将位移放到最前面

动画(animation)

1. 什么是动画

   动画是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果

2. 动画的基本使用

   先定义动画，再调用定义好的动画

3. 定义动画

   @keyframes 动画名称 {
       0% {
           width: 100px;
       }
       100% {
           width: 200px
       }
   }
   

4. 使用动画

   div {
       animation-name: 动画名称;    /* 调用动画 */
   	animation-duration: 持续时间; 	/* 持续时间 */
   }
   

5. 动画序列

   0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列

   在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果

   动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数

   用百分比来规定变化发生的时间，或用 from 和 to，等同于 0% 和 100%

6. 代码演示

   <style>
   div {
     width: 100px;
     height: 100px;
     background-color: aquamarine;
     animation-name: move;
     animation-duration: 0.5s;
   }
   
   @keyframes move{
     0% {
       transform: translate(0px)
     }
     25% {
       transform: translate(1000px, 0)
     }
     50% {
       transform: translate(1000px, 500px)
     }
     75% {
       transform: translate(0, 500px)
     }
     100% {
       transform: translate(0, 0)
     }
   }
   </style>
   

动画常见属性

div {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  animation-name: move;         /* 动画名称 */
  animation-duration: 2s;        /* 动画花费时长 */
  animation-timing-function: ease-in-out;        /* 动画速度曲线 */
  animation-delay: 2s;              /* 动画等待多长时间执行 */
  animation-iteration-count: infinite;    /* 规定动画播放次数 infinite: 无限循环 */
  animation-direction: alternate;       /* 是否逆行播放 */
  animation-fill-mode: forwards;          /* 动画结束之后的状态 */
}

div:hover {
  animation-play-state: paused;        /* 规定动画是否暂停或者播放     pause鼠标放上暂停，移走继续*/
}

动画简写方式

/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode

• 简写属性里面不包含 animation-play-state
• 暂停动画 animation-play-state: paused; 经常和鼠标经过等其他配合使用
• 要想动画走回来，而不是直接调回来：animation-direction: alternate
• 盒子动画结束后，停在结束位置：animation-fill-mode: forwards

animation: move 2s linear 1s infinite alternate forwards;

速度曲线细节

animation-timing-function: 规定动画的速度曲线，默认是 ease

div {
  width: 0px;
  height: 50px;
  line-height: 50px;
  white-space: nowrap;
  overflow: hidden;
  background-color: aquamarine;
  animation: move 4s steps(24) forwards;    //24步把下面的24个字符显示出来
}

@keyframes move {
  0% {
    width: 0px;
  }

  100% {
    width: 480px;
  }
}
<div>wdwufufkauhufebfucfwub22</div>

奔跑的熊大

<style>
  body {
    background-color: #ccc;
  }      
  div {
    position: absolute;
    width: 200px;
    height: 100px;
    background: url(media/bear.png) no-repeat;
    /* 我们元素可以添加多个动画， 用逗号分隔 */
    animation: bear .4s steps(8) infinite, move 3s forwards;
  }

  @keyframes bear {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: -1600px 0;
    }
  }

  @keyframes move {
    0% {
      left: 0;
    }
    100% {
      left: 50%;
      /* margin-left: -100px; */
      transform: translateX(-50%);
    }
  }
</style>
<body>
  <div></div>
</body>

3D 转换

3D 的特点

• 近大远小
• 物体和面遮挡不可见

三维坐标系

x 轴：水平向右 – 注意：x 轴右边是正值，左边是负值

y 轴：垂直向下 – 注意：y 轴下面是正值，上面是负值

z 轴：垂直屏幕 – 注意：往外边的是正值，往里面的是负值

3D 转换

• transform: translateX(100px)：仅仅是在 x 轴上移动
• transform: translateY(100px)：仅仅是在 y 轴上移动
• transform: translateZ(100px)：仅仅是在 z 轴上移动 参数单位一般是px
• transform: translate3d(x, y, z)：其中x、y、z 分别指要移动的轴的方向的距离
• 注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充

transform: translate3d(100px, 100px, 100px)
transform: translate3d(100px, 100px, 0)         /* x, y, z 对应的值不能省略，不需要填写用 0 进行填充 */

透视 perspective

• 如果想要网页产生 3D 效果需要透视(理解成 3D 物体投影的 2D 平面上)

• 实际上模仿人类的视觉位置，可视为安排一只眼睛去看

• 透视也称为视距，所谓的视距就是人的眼睛到屏幕的距离

• 距离视觉点越近的在电脑平面成像越大，越远成像越小

• 透视的单位是像素

• 透视需要写在被视察元素的父盒子上面

• 注意下方图片

  • d：就是视距，视距就是指人的眼睛到屏幕的距离 (perspective)

  • z：就是 z 轴，z 轴越大(正值)，我们看到的物体就越大 (translateZ)

    

body {
  perspective: 1000px;
}

translateZ

translateZ 与 perspecitve 的区别

perspecitve 给父级进行设置，translateZ 给 子元素进行设置不同的大小

3D 旋转rotateX

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

1. 语法

   transform: rotateX(45deg) – 沿着 x 轴正方向旋转 45 度

   transform: rotateY(45deg) – 沿着 y 轴正方向旋转 45 度

   transform: rotateZ(45deg) – 沿着 z 轴正方向旋转 45 度

   transform: rotate3d(x, y, z, 45deg) – 沿着自定义轴旋转 45 deg 为角度

2. 代码案例

   div {
     perspective: 300px;
   }
   
   img {
     display: block;
     margin: 100px auto;
     transition: all 1s;
   }
   
   img:hover {
     transform: rotateX(-45deg)
   }
   

3. 左手准则

   左手的手拇指指向 x 轴的正方向。其余手指的弯曲方向就是该元素沿着 x 轴旋转的方向

   

​

3D旋转 rotateY

左手准则：左手的拇指指向 y 轴的正方向。其余的手指弯曲方向就是该元素沿着 y 轴旋转的方向(正值)

div {
  perspective: 500px;
}

img {
  display: block;
  margin: 100px auto;
  transition: all 1s;
}

img:hover {
  transform: rotateY(180deg)
}

3D旋转 rotateZ

和2D旋转效果差不多

div {
  perspective: 500px;
}

img {
  display: block;
  margin: 100px auto;
  transition: all 1s;
}

img:hover {
  transform: rotateZ(180deg)
}

rotate3d

• transform: rotate3d(x, y, z, deg) – 沿着自定义轴旋转 deg 角度

• x, y, z 表示旋转轴的矢量，是标识你是否希望沿着该轴进行旋转，最后一个标识旋转的角度

  transform: rotate3d(1, 1, 0, 180deg) – 沿着对角线旋转 45deg

  transform: rotate3d(1, 0, 0, 180deg) – 沿着 x 轴旋转 45deg

div {
  perspective: 500px;
}

img {
  display: block;
  margin: 100px auto;
  transition: all 1s;
}

img:hover {
  transform: rotate3d(1, 1, 0, 180deg)
}

3D 呈现 transform-style

• 控制子元素是否开启三维立体环境
• transform-style: flat 代表子元素不开启 3D 立体空间，默认的
• transform-style: preserve-3d 子元素开启立体空间
• 代码写给父级，但是影响的是子盒子

CSS3过渡

//宽度在1s内逐渐变宽
<style>
  div {
    width: 200px;
	height: 50px;
    background-color: red;
    transition: width 1s, height 1s;        //后两个可省略   多个属性同时变用, 隔开
    //或者 transition: all 1s;
  }
  div:hover {
    width: 400px;
    height: 100px;
    background-color: blue;
  }
</style>
<div></div>

 //进度条
<style>
        .haha {
            height: 6px;
            width: 40px;
            border: 1px solid red;
            margin: 0 auto;
            border-radius: 3px;
            padding: 1px;
        }

        .origin {
            height: 100%;
            width: 50%;
            background-color: red;
            transition: width 0.5s;
        }
        .haha:hover .origin {   //当鼠标放在haha上时使origin宽度变为100%
            width: 100%;
        }
    </style>
<div class="haha">
    <div class="origin"></div>
</div>

运动曲线：transition-timing-function可以用step()

transition-timing-function: steps(4);    /*分四步完成*/
transition-timing-function: step(4, start); /*分四步完成, 在每一步的开始就执行*/