摘要：最近學(xué)習(xí)了的動(dòng)畫在這里做一個(gè)總結(jié)。也可以用復(fù)合屬性移動(dòng)圖片正方向的左邊移動(dòng)也就是我們的右邊不要以為始終是是數(shù)學(xué)數(shù)軸的軸方向。其中值為默認(rèn)值，表示所有子元素在平面呈現(xiàn)。更多的還是需要結(jié)合代碼修改練習(xí)去體會(huì)。

最近學(xué)習(xí)了CSS3的動(dòng)畫,在這里做一個(gè)總結(jié)。
現(xiàn)在大部分的交互動(dòng)畫,我們都可以使用CSS3來(lái)完成,效率更高，并且在移動(dòng)端上的兼容非常好。但是缺少一種正向編程的快感(個(gè)人感覺(jué))。

先引出關(guān)于3D的幾個(gè)基本技術(shù)點(diǎn),多的就不說(shuō)了,這幾個(gè)也夠夠的了:

旋轉(zhuǎn):rotate、rotateX、rotateY、rotateZ

移動(dòng):translate3D、translateX、translateY、translateZ

景深、透視:perspective

3D空間:transform-style:perseve-3d

rotate、rotateX、rotateY、rotateZ 旋轉(zhuǎn)
rotate:

transform:rotate(45deg);=>順時(shí)針旋轉(zhuǎn)45度

rotateX:

`transform:rotateX(45deg);=>垂直繞著X軸旋轉(zhuǎn)(圖片往后倒，你往前撲的方向)，有一個(gè)很好玩的形容，就是體操運(yùn)動(dòng)員繞著單杠在旋轉(zhuǎn)!!不知道的可以去看一下。

rotateY:

transform:rotateY(45deg);=>垂直繞著Y軸逆時(shí)針旋轉(zhuǎn)(也就是圖片正方向的右肩移動(dòng))，也有一個(gè)很好玩的形容,就是跳鋼管舞。

rotateZ:

transform:rotateZ(45deg);=>跟rotate一樣。

此時(shí)此刻單純用這幾個(gè)是沒(méi)辦法看出效果來(lái)的,需要借助景深或者叫透視perspecitve來(lái)完成。

perspective:景深、透視

perspective:

perspective:600px;=>需要加在旋轉(zhuǎn)變形的父容器上,數(shù)值越大，相當(dāng)于離他的距離越大。具體的可以自己去嘗試。  

在使用景深的時(shí)候有一個(gè)注意點(diǎn),在使用translateZ的時(shí)候,景深加在一個(gè)和自己寬高一樣的父容器上的效果和加在一個(gè)比自己大的父容器上的效果不一樣,這是因?yàn)榫吧钕喈?dāng)于我們始終在在父容器的中心點(diǎn)的位置去觀看。這個(gè)自己去嘗試就能明白了。

我們所能看到的物體大小,取決于我們的視野能看到的多少。

    

        

                 

                                                                                                                    
                         GPU云服務(wù)器
                                             
                         云服務(wù)器
                                                                                                                                                 
                                      
                     
                    
                                                                                               css3d
                                                                                                           學(xué)習(xí)筆記
                                                                                                           學(xué)習(xí)筆記一
                                                                                                           基礎(chǔ)學(xué)習(xí)筆記
                                                         
                 
               
              
             
               

                   
 文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
                 
                   
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/102606.html
               
                      
               

                 
                                  
上一篇：根據(jù)調(diào)試工具看Vue源碼之computed（二）
  
                                                
                                       
下一篇：用for...in 和Object.keys()枚舉對(duì)象屬性的差異
                                  
              
              

                
相關(guān)文章
                

                             
                                                                                                    

                                                

                          
CSS3學(xué)習(xí)筆記
                                                     
摘要：在動(dòng)畫過(guò)程中，您能夠多次改變這套樣式。以百分比來(lái)規(guī)定改變發(fā)生的時(shí)間，或者通過(guò)關(guān)鍵詞和，等價(jià)于和。為了獲得最佳的瀏覽器支持，您應(yīng)該始終定義和選擇器。注釋請(qǐng)使用動(dòng)畫屬性來(lái)控制動(dòng)畫的外觀，同時(shí)將動(dòng)畫與選擇器綁定。CSS3 被劃分為模塊
其中最重要的 CSS3 新增實(shí)用模塊包括：

背景和邊框
文本效果
2D/3D 轉(zhuǎn)換
動(dòng)畫
多列布局
用戶界面

CSS3 邊框:
　　用于創(chuàng)建圓角

border...
                                                   
                          

                                

                                    wenshi11019
                                    2019-04-23 13:17
                                    評(píng)論0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
CSS 性能優(yōu)化筆記
                                                     
摘要：硬件加速是指應(yīng)用的圖形性能對(duì)瀏覽器中的一些圖形操作交給來(lái)完成，因?yàn)槭菍ｉT為處理圖形而設(shè)計(jì)，所以它在速度和能耗上更有效率。

在實(shí)習(xí)做一個(gè)移動(dòng)項(xiàng)目的時(shí)候，實(shí)現(xiàn)一個(gè)動(dòng)畫效果，在 iPhone 和 Chrome 上調(diào)試沒(méi)有問(wèn)題，在千元左右的 Android 機(jī)上測(cè)試問(wèn)題就很大了，卡頓非常明顯，百思不得其解，吐血，卒。
這個(gè)悲傷的故事就是本文的引子，真真切切的體會(huì)到了 CSS 對(duì)用戶體驗(yàn)的影響非...
                                                   
                          

                                

                                    LiuZh
                                    2019-08-29 11:30
                                    評(píng)論0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
純JS實(shí)現(xiàn)KeyboardNav(學(xué)習(xí)筆記)二
                                                     
純JS實(shí)現(xiàn)KeyboardNav(學(xué)習(xí)筆記)二

這篇博客只是自己的學(xué)習(xí)筆記,供日后復(fù)習(xí)所用,沒(méi)有經(jīng)過(guò)精心排版,也沒(méi)有按邏輯編寫
這篇主要是添加css,優(yōu)化js編寫邏輯和代碼排版
GitHub項(xiàng)目源碼
預(yù)覽地址

最終效果
showImg(https://sfault-image.b0.upaiyun.com/202/564/2025649432-5adb193d75ef2_articlex);
...
                                                   
                          

                                

                                    msup
                                    2019-08-22 16:35
                                    評(píng)論0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
純JS實(shí)現(xiàn)KeyboardNav(學(xué)習(xí)筆記)二
                                                     
純JS實(shí)現(xiàn)KeyboardNav(學(xué)習(xí)筆記)二

這篇博客只是自己的學(xué)習(xí)筆記,供日后復(fù)習(xí)所用,沒(méi)有經(jīng)過(guò)精心排版,也沒(méi)有按邏輯編寫
這篇主要是添加css,優(yōu)化js編寫邏輯和代碼排版
GitHub項(xiàng)目源碼
預(yù)覽地址

最終效果
showImg(https://sfault-image.b0.upaiyun.com/202/564/2025649432-5adb193d75ef2_articlex);
...
                                                   
                          

                                

                                    Muninn
                                    2019-08-29 15:06
                                    評(píng)論0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                           
                
              
              
               

                  
                  
發(fā)表評(píng)論
                   

                                      
                      

                        登陸后可評(píng)論
                      
                   
               
              

                

                  
0條評(píng)論