前端3D详解

ゞ浴缸里的玫瑰 2023-07-11 11:04 122阅读 0赞

## transition 过渡 ##

transition-property  :  规定设置过渡效果的CSS属性的名称。
    transition-duration  :  规定完成过渡效果需要多少秒或毫秒。
    transition-delay  :  定义过渡效果何时开始。  ( 延迟(数值为正数)，也可以提前(数值为负数) )
    transition-timing-function  : linear|ease-in|ease-out|ease-in-out；
    	规定速度效果的速度曲线。常用的就是linear匀速，在动画时也是常用到这个属性。
    	下面是贝塞尔曲线函数引用 https://cubic-bezier.com/ 网址
      	transition-timing-function: cubic-bezier(.4,-0.45,.9,1.61);
    
    下面是复合样式：
      transition: all 1s 2s linear; 
      变化所有样式，1s完成 2s后开始 均匀变化
      也可以单独指定变化的样式，延迟时间也可以为负值，就是代表提前开始，总共时间减去提前开始的时间，就是样式完成的时间
      transition: height 3s -2s  linear;
      就是指只让高3s进行过渡变化，但由于提前2s所以过渡时间就是1s
      
      注：总时间和延迟时间有顺序，第一个时间固定就是总时间，其余属性值无顺序
      
    注：不要加到hover上，否则达不到想要的返回效果。

![在这里插入图片描述][20200305091056683.png]

## transform变形 ##

translate : 位移
        translateX
        translateY
        translateZ   ( 3d 时用到)
    
    scale : 缩放 （值是一个比例值，正常大小就是1，会已当前元素中心点进行缩放）
        scaleX
        scaleY
        scaleZ   (3d时用到)
    
    rotate : 旋转 （ 旋转的值，单位是角度 deg ）
        rotateX  (3d)
        rotateY  (3d) 
        rotateZ  ( 和rotate是等级关系，那正值按顺时针旋转，负值按逆时针旋转 )
    
    skew : 斜切
        skewX : 单位也是角度，正值向左倾斜，负值向右倾斜。
        skewY
        
    	transform: skew(30deg, 0);斜切 正值向左倾斜 负值向右倾斜
    	
    transform的注意事项：
        1. 变形操作不会影响到其他元素。
        2. 变形操作只能添加给块元素，但是不能添加给内联元素，对内联元素不起作用。
        3. 复合写法，可以同时添加多个变形操作。
            执行是有顺序的，先执行后面的操作，再执行前面的操作。
            translate会受到 rotate、scale、skew的影响
        4. transform-origin : 基点的位置
            x y z(3d)
           注：3D时 x y可以写汉字例如left center，但z轴只能写数值
           
    transform变形(复合样式先执行后面的，一般情况下位移会受到影响)
    transform: translate(40px) rotate(60deg);先旋转后移动
    transform: rotate(60deg) translate(40px);会受到角度的影响所以会像右下角一定角度移动后在旋转

## animation 动画？ ##

animation-name : 设置动画的名字 (自定义的)
    animation-duration : 动画的持续时间
    animation-delay : 动画的延迟时间
    animation-iteration-count : 动画的重复次数 ，默认值就是1 ，infinite无限次数
    animation-timing-function : 动画的运动形式
    
    注：
        1. 运动结束后，默认情况下会停留在起始位置。
        2. @keyframes :  from -> 0%   ,  to ->  100%
    
    animation-fill-mode : 规定动画播放之前或之后，其动画效果是否可见。
     	none (默认值) : 在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效
    	backwards  :  在延迟的情况下，让0%在延迟前生效
     	forwards  :  在运动结束的之后，停到结束位置
     	both  :  backwards和forwards同时生效
    
    animation-direction  :  属性定义是否应该轮流反向播放动画。
     	alternate  :  一次正向(0%~100%)，一次反向(100%~0%)
     	reverse : 永远都是反向 , 从100%~0%
     	normal (默认值) : 永远都是正向 , 从0%~100%

**animate.css**  
一款强大的预设css3动画库。  
官网地址：https://daneden.github.io/animate.css/

基本使用：
        animated : 基类(基础的样式，每个动画效果都需要加)在class后面加
        infinite : 动画的无限次数
        
        先用link引入css文件然后如下
    	<div class=“animated 效果名字”></div>

## 3D操作 ##

transform:复合样式
       rotateX() : 正值向上翻转
       rotateY() : 正值向右翻转
       translateZ() : 正值向前，负值向后
       scaleZ() : 立体元素的厚度
    
    3d写法
        scale3d() : 三个值 x y z
        translate3d() : 三个值 x y z
        rotate3d() : 四个值 0|1(x轴是否添加旋转角度)  0|1(y轴是否添加旋转角度)  0|1(z轴是否添加旋转角度)  deg
    
    perspective（景深）: 离屏幕多远的距离去观察元素，值越大幅度越小，有3D效果时一定要加，否则看不到3D效果。
    
    perspective-origin : 景深-基点位置，观察元素的角度。
    
    transform-origin: center center -50px;   （Z轴只能写数值，不能写单词）
    
    transform-style : 3D空间，产生厚度时用到
        flat  (默认值2d)、preserve-3d   (3d，产生一个三维空间)
    
    backface-visibility : 背面隐藏
        hidden、visible (默认值)

[20200305091056683.png]: https://img-blog.csdnimg.cn/20200305091056683.png