css 3D动画

一、今天让我们来学习一下css 3D吧！

1.首先我们要学习好css3 3d一定要有一定的立体感！

2.再来那就聊聊原理吧！

3.css3 3d 顾名思义是由两个2d名片组成的 但不是让你建立连个2d啊！

• 一个div要想又3d效果那就得在最外层建立一个3d平面.
• transform-style: preserve-3d; 3d空间
• perspective: 800px; 它被成为视距或者紧身.
• 但是要是相对与body是不是也得给div上一层也得加一个紧身呢！
• 有了3d效果是不是的有一个像眼镜一样的东西呢 在不同的地方显示的效果也是不一样的
• perspective-origin:50% 50%; 这就是你的眼镜啦 位置不同效果也就不用了
• 这样我们的3d空间就已经建立成了。

4、3d无非就是通过X Y Z轴来进行操作

• rotateX/rotateY/rotateZ可以帮助理解三维坐标
• translateZ则可以帮你理解透视位置。
• transform-origin我们成为基点 在水平方向改变观看div的位置
• scale 缩放 rotate 旋转 translate移动 skew倾斜 通过这些来进行3d效果

代码如下：

    
    
    
    

    



    

        

            

                
too
                
bottom
                
left
                
right
                
before
                
after
            

            

                
top
                
bottom
                
left
                
right
                
before
                
after
            
        
    
    

代码如下：

持续更新，欢迎大家收藏指教！