CSS 3 3D轉換

標籤：三維空間   class   1.2   空間   參數設定   比例   環境   bottom   apple   

繪製3D環境

父元素設定了 preserve-3d  子項目就可以以父元素作為平面進行3d轉換

 transform-style: preserve-3d; 

 

設定視點 :表示透視效果  值越小 透視效果越明顯(聯絡現實) 
perspective: 50px;

設定元素背面是否可見visible:可見的 預設屬性hidden:;不可見

 backface-visibility: hidden;

 

 設定視點的原點

top  bottom  right  left  center (預設值) 

可以用具體的數值  100px  或者用50%

 perspective-origin: center; 

 

 注:形變的原點也就是該元素圍繞著的那個點變行或者旋轉,該屬性只有在設定啦

　　transform的時候會起作用   

 

 

3D動畫

 

(1)平移 x, y ,z
前兩個值可以是具體的數值 也可以使用百分比(參考值是元素)
最後一個屬性必須是數值

100% {transform: translate3d(50%, 50%, 50px)}

(2)縮放: x y z 比例係數
100% {transform: scale3d(1.2, 1.2, 1.2);}

(3)旋轉
四個參數 前三個分別是定義三維空間中的一個點, 該點與原點的連線為軸, 第四個參數設定的圍繞該軸旋轉的度數


100% {transform:rotate3d(100, 0, 100, 60deg);}

 

 

 

 

CSS 3 3D轉換