CSS中——2D、3D即动画小笔记(未完成)

2D转换：

一、2D转换之translate：
    2D转换时2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。
    
    1.语法：
         transform: translateX(100px);
         transform: translateY(100px);
         transform: translate(200px,200px); 
    
    2.重点：
        定义2D转换中的移动，沿着X和Y轴移动元素
        translate最大的优点：不会影响到其他元素的位置
        translate中的百分比单位是相对于自身的translate（50%，50%）
        对行内标签没有效果

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

    1.语法：
        transform: rotate(360deg)
    
    2.重点：
        rotate里面跟度数，单位是deg
        角度为正时，顺时针旋转，角度为负时，逆时针旋转
        默认旋转中心点是元素的中心点

三、2D转换之旋转transform-orgin：
    1.语法：
        transform-origin: X Y;

    2.重点：
        注意后面的参数x和y用空格隔开
        x y 默认旋转的中心点是元素的中心点（50% 50%）
        还可以给x y 设置 像素 或者 方向名称（top bottom left right center）

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

五、2D转换综合写法：
    注意：
        同时使用多个转换，其格式为：transform  trasnslate  rotate  scale等
        其顺序会影响旋转的效果，（先旋转会改变坐标轴方向）
        当我们同时有位移和其他属性的时候，记得要将位移放到最前




动画：
    动画的基本使用：
            制作动画分为两步：
                1. 先定义动画
                2. 再使用（调用）动画

    animation:动画名称  持续时间  运动曲线  何时开始 播放次数 是否反方向  动画起始或者结束的状态
        /*animation: name duration timing-function delay   iteration   direction  fill-mode;
                    曲线      持续时间       重复次数      延迟    状态    */    
    animation: move1 2s linear 0s 1 forwards;

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


3D转换
    1.三维坐标系
        三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。
    
        x轴：水平向右  注意：x右边是正值，左边是负值
        y轴：垂直向下  注意：y下面是正值，上面是负值
        z轴：垂直屏幕  注意：往外面是正值，往里面是负值     


    3D移动translate3d
    3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向
    
    2.透视prespective
        
        在2D平面产生近大远小视觉立体，但是只有效果是二维的

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

     透视写在被观察元素的父盒子上面的
    
    3.3D选择 rotate3d
        3D旋转指的是可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转
        语法：
            transform：rotateX(45deg) ：沿着x轴正方向旋转45度
            transform：rotateY(45deg) ：沿着y轴正方向旋转45度
            transform：rotateZ(45deg) ：沿着z轴正方向旋转45度

            transform：rotate3d(x,y,z,deg) ：沿着自定义轴旋转deg为角度
                xyz是表示旋转轴的矢量，是表示你是否希望沿着该轴旋转，最后一个表示旋转的角度。
                
                transform:rotate3d(1,0,0,45deg)就是沿着x轴旋转45deg
                transform:rotate3d(1,1,0,45deg)就是沿这对角线轴旋转45deg

    4.3D呈现transfrom-setle
            
            控制子元素是否开启三维立体环境
            transform-style：flat子元素不开启3d立体空间 （默认不开启）
            transform-style：preserve-3d；子元素开启立体空间
            代码写给父类，但是影响的是子盒子
            这个属性很重要，后面必用