第十一章：H5+C3提高(下)

第十一章：H5+C3提高(下)

11.1：2D转换

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

转换(transform)你可以简单理解为变形。

• 移动：translate

  2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。

  语法：

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

  注意：

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

• 2D旋转之旋转rotate

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

  语法：

  transform: rotate(度数);
  

  注意：

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

• 2D旋转中心点transform-origin

  我们可以设置元素转换的中心点

  语法：

  transform-origin: x y;
  

  注意：

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

• 2D转换之缩放scale

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

  语法：

  transform: scale(x, y);
  

  注意：

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

• 2D转换综合写法

  注意：

  1. 同时使用多个转换，其格式为：transform: translate() tranalate() rotate() scale()等。
  2. 其顺序会影响转换的效果。(先旋转会改变坐标轴方向)。
  3. 当我们同时有位移和其他属性的时候，记得要将位移放到最前。

11.2：CSS3动画

​ 动画(animation)是CSS中最具有颠覆性的特征之一，可通过多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

​ 相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

• 动画的基本使用

  制作动画分为两步：

  1. 先定以动画

     @keyframes 动画的命名 {
         0% {  // 开始状态
         	transform: translate(0px);
         }
     
         100% { // 结束状态
         	transform: translate(1000px);
         }
     }
     

  2. 在调用动画

     div {
         animation-name: 动画的命名;  //调用动画，
         animation-duration: 1.5s;  //动画持续的时间
     }
     

  动画序列：

  1. 可以做多个状态的变化keyframe关键帧。
  2. 0%是动画的开始，100%是动画的完成。
  3. 动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。
  4. 用百分比来规定变化发生的时间，或用关键词form和to，等同于0%和100%。
  5. 里面的百分比要是整数。
  6. 里面的百分比就是总的时间的划分。

• 动画常用属性

  属性	描述
  @keyframes	规定动画
  animation	所有动画属性的简写属性，除了animation-play-style属性
  animation-name	规定了@keyframes动画的名称。(必须的)
  animation-duration	规定动画完成一个周期所花费的秒或毫秒，默认是0。(必须的)
  animation-timing-function	规定动画完成一个周期所花费的秒或毫秒，默认是0。(必须的)
  animation-delay	规定动画何时开始，默认是0
  animation-iteration-count	规定动画被播放的次数，默认是1，还有infinite
  animation-direction	动画是否在下一周期逆向播放，默认是normal，alternate逆播放
  animation-play-state	规定动画是否正在运行或暂停，默认是runing，还有paused
  animate-fill-mode	规定动画结束后状态，保持forwards回到起始backwards

• 动画简写属性

  animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束状态;
  animation: myforst 5s     linear   2s   infinite  alternate   forwards;
  

  1. 简写属性里面不包含：animation-play-state。
  2. 暂停动画：animation-play-state: puased;经常和鼠标结果等其他配合使用。
  3. 想要动画走回来，而不是直接跳回来：animation-direction: altermate;
  4. 盒子动画结束后，停在结束位置：animation-fill-mode: forwards;

• 速度曲线细节

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

  值	描述
  linear	动画从头到尾的速度是相同的。匀速。
  ease	默认。动画以低速开始，然后加快，在结束前变慢。
  ease-in	动画以低速开始。
  ease-out	动画以低速结束。
  ease-in-out	动画以低速开始和结束。
  steps()	指定了时间函数中的间隔数量(步长)。

11.3：CSS3 3D转换

• 三维坐标系

  三维坐标系其实就是指立体空间，立体空间时由三个轴共同组成的。

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

• 3D移动translate3d

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

  1. translfrom: translateX(100px);：仅仅是在x轴上移动。
  2. translfrom: translateY(100px);：仅仅是在Y轴上移动。
  3. translfrom: translateZ(100px);：仅仅是在Z轴上移动。(注意：translateZ一般用px单位)
  4. translfrom: translate3d(x, y, z);：其中x，y，z分别指要移动的轴的方向的距离。

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

• 透视perspective

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

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

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

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

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

• 3D旋转rotate3d

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

  语法：

  1. transfrom: rotateX(45deg);：沿着x轴正方向旋转45度。

     左手准则：

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

  2. transfrom: rotateY(45deg);：沿着y轴正方向旋转45度。

     左手准则：

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

  3. transfrom: rotateZ(45deg);沿着z轴正方向旋转45deg。

  4. transfrom: rotate3d(x,y,z,45deg);沿着自定义轴旋转deg为角度。(了解)

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

     • transfrom: rotate3d(1,0,0,45deg);就是沿着x轴旋转45deg。
     • transfrom: rotate3d(1,1,0,45deg);就是沿着对角线旋转45deg。

• 3D呈现transfrom-style

  1. 控制子元素是否开启三维立体环境。
  2. transfrom-style: flat;子元素不开启3d立体空间，默认的。
  3. transfrom-style: preserve-3d;子元素开启立体空间。
  4. 代码写给父级，但影响的是子盒子。