CSS3基础03（3D②） 求粉丝

3 D

（3.1）rotateY

围绕着Y轴进行旋转

（1）正数是(站在右边推)，负数是(站在左边推)

（2.1）定义元素背过去是否可见

1. backface-visibility: visible|hidden;

说明：visible表示可见，hidden表示不可见

测试贝塞尔曲线的网址：http://xuanfengge.com/easeing/ceaser/

（1）translateZ

就是在Z轴上来回移动，但是如果没有透视的情况下，完全看不出效果，所以，一般transform：translateZ（）都是配合透视一起使用

小经验：translateZ和rotate结合会产生不一样的3D效果，不同的顺序的效果截然不同，如果先rotate 在translateZ 元素是在空间里面发生旋转 而如果是translateZ在rotate 元素是在直线上发生旋转。

正值是凸出，负值相反。

（2）透视 （景深）

1. perspective：值
   

   　　

 

说明：透视值越小，透视效果越强，值越大，透视效果越弱，透视添加在父级身上

（3）灭点（透视点，消失点）

1. perspective-origin：值
   

   　　

就是3D怼的方向。

说明：值可以是像素，也可以是百分比，还可以是方位名词，默认值是50%，50%（中心点）

（4）transform-style

作用：规定被嵌套元素如何在3D空间中显示

1. tranform-style：值 preserve-3D
   

   　　

值说明：flat是默认值，让子元素不保留其3D位置， preserve-3d  让子元素保留其3D位置 ，加在父亲身上

小总结：透视 灭点 transform-style都是添加在父级身上

关键： 当元素发生3D翻转的时候，整个坐标系也跟着发生了翻转！！

（5）css3的动画

1. animation:值
   

   　　

 

值说明：

（1）自定义动画名

（2）动画的持续时间 单位是s或者ms

（3）动画的曲线

（4）动画从何时开始

（5）控制动画执行的次数  没有单位， 一直执行：infinite

（6）控制动画是否逆序播放  默认值normal  逆序：alternate

（7）控制动画的播放和暂停  默认值是播放：running   暂停：paused

（8）动画最后的停留位置  forwards 让动画停留在最后一帧

动画一定要先写animation 然后搭配@keyframes去写自定义的动画

@浏览器前缀keyframes 自定义的动画名{
  0%{
    //css语句
   }
   ...
  100%{
    //css语句
     }
  }

例：

1.  @keyframes laowang{
    0%{
    width:100px;
    height:100px;
    left:0;
    transform:rotate(0deg);
    }
    50%{
    width:800px;
    height:800px;
    transform:rotate(720deg);
    }
    100%{
    width:500px;
    height:500px;
    left:800px;
    transform:rotate(-720deg);
    }
    }

 

（4）帧动画

steps（帧数）

其实就是让动画分成多少步去执行，steps（）里面的数值是总画面数 - 1 ，在制作精灵图的时候每个画面的宽度尽量一致，并且建议在一行里面摆放

（5）animate.css库的使用

官网：https://daneden.github.io/animate.css/

作用：将一切常见的动画直接封装，开发者不需要考虑实现过程，只需要添加对应的类就能实现动画效果

使用步骤：

（1）将下载下来的animate.css 引入到你的项目中

（2）去官网获取想要的效果 给对应的元素添加上animated 类 （必填）和你想要的效果的类