css3之3D立方體

阿新 • • 發佈：2019-01-20

在做立方體前先介紹下3D轉換的知識：

1、左手座標系

伸出左手，讓拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。這樣我們就建立了一個左手座標系，拇指、食指和中指分別代表X、Y、Z軸的正方向。如下圖

2、CSS中的3D座標系

CSS3中的3D座標系與上述的3D座標系是有一定區別的，相當於其繞著X軸旋轉了180度，如下圖

a) 繞X軸旋轉，rotateX

b) 繞Y軸旋轉，rotateY

c) 繞Z軸旋轉，rotateZ.html

d) 在X軸移動，translateX.html

d) 在Y軸移動，translateY.html

d) 在Z2軸移動，translateZ.html

3、左手法則

左手握住旋轉軸，豎起拇指指向旋轉軸正方向，正向就是其餘手指捲曲的方向。

4、透視（perspective）

電腦顯示屏是一個2D平面，影象之所以具有立體感（3D效果），其實只是一種視覺呈現，通過透視可以實現此目的。

透視可以將一個2D平面，在轉換的過程當中，呈現3D效果。

注：並非任何情況下需要透視效果，根據開發需要進行設定。

perspective有兩種寫法

a) 作為一個屬性，設定給父元素，作用於所有3D轉換的子元素

b) 作為transform屬性的一個值，做用於元素自身

5、理解透視距離

透視會產生“近大遠小”的效果

原始碼:

<!DOCTYPE html 
>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>立方體</title>
    <style  type="text/css">
        .box{
            width: 250px;
            height: 250px;
            border: 1px dashed red;
            margin:100px auto;
            position: relative 
;
            border-radius: 50%;

            /* 讓子盒子保持3d效果*/
transform-style:preserve-3d;

            /*transform:rotateX(30deg) rotateY(-30deg);*/
animation:gun 8s linear infinite;
        }
       .box>div{
           width: 100%;
           height: 100%;
           position: absolute;
           text-align: center;
           line-height: 250px;
           font-size:60px;
           color:#daa520;
       }
        .left{
            background-color: rgba(255,0,0,0.3);
            /*變幻中心*/
transform-origin:left;
            /*變換角度*/
transform:rotateY(90deg)  translateX(-125px);
        }
        .right{
            background-color: rgba(255,0,0,0.3);
            /*變幻中心*/
transform-origin:left;
            /*變換角度*/
transform:rotateY(90deg)  translateX(-125px);
        }
        .forward{
            background-color: rgba(255,0,0,0.3);
            transform:translateZ(125px);
        }
        .back{
            background-color: rgba(255,0,0,0.3);
            transform:translateZ(-125px);
        }
        .up{
            background: rgba(255,0,255,0.3);
            transform:rotateX(90deg) translateZ(125px);
        }
        .down{
            background: rgba(255,0,255,0.3);
            transform:rotateX(-90deg) translateZ(125px);
        }
        @keyframes    gun{
          0%{
             transform: rotateX(0deg) rotateY(0deg);
          }
            100%{
                transform:rotateX(360deg) rotateY(360deg);
            }
        }
    </style>
</head>
<body>
    <div  class="box">
        <div  class="up"></div>
        <div  class="down"></div>
        <div  class="left"></div>
        <div  class="right"></div>
        <div  class="forward"></div>
        <div  class="back"></div>
    </div>
</body>
</html>

css3之3D立方體

在做立方體前先介紹下3D轉換的知識： 1、左手座標系伸出左手，讓拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。這樣我們就建立了一個左手座標系，拇指、食指和中指分別代表X、Y、Z軸的正方向。如下圖 2、CSS中的3D座標系 CSS3中的3D座標系與上述的3D

CSS3之3D變形，實現大海波濤

animation:動畫名稱花費時間運動曲線何時開始播放次數是否反方向; @keyframes 動畫名稱 { from{ 開始位置 } 0% to{ 結束 } 100% } 實現程式碼： <!DOCTYPE html> <html> <head&

基於css3的3D立方體旋轉特效（先translate與先rotate的不同）

3D變換基於幾個比較重要的屬性，perspective,translateZ,preserve-3d; 格式：舞臺(perspective) 容器(3D, preserve-3d) 內容 3D實現立方體盒子： transform的4

HTML5 CSS3 誘人的實例： 3D立方體旋轉動畫

nim tom gravity order img fin 多說 line html 轉載請標明出處：http://blog.csdn.net/lmj623565791/article/details/34120047創意來自：http://www.html5trick

CSS3之創建3D場景

眼睛 pla 500px strong serve blue light tez 垂直 1.屬性介紹 perspective:800 平面距離三維中方框的距離 perspective-origin:50% 50% 表示從平面上哪個位置看三維圖，相當於是X軸和Y軸

CSS3 之立方體

利用CSS3屬性在頁面中寫出立體的3d盒子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" con

Css3 3D立方體盒子小例項

程式碼： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>3D立體小例項</title> <style> *{

HTML5 CSS3 誘人的例項： 3D立方體旋轉動畫

創意來自：http://www.html5tricks.com/demo/html5-3d-cube/index.html ，同學給我發的例子，感覺很不錯，不過實在想不出來實際的用處，但是效果很炫~效果圖：知識點：1、perspective ，transform 的複習2、

純CSS3實現一個旋轉的3D立方體盒子

簡介上網易前端微專業課程，裡面有一個課外作業是實現一個3D旋轉立方體，花了點時間做了下，還有點意思，寫個簡單教程，供大家學習。先放上最終要實現的效果注：程式碼在chrome 43.0.2357.124 m正常，其他瀏覽器未測試步驟 1.

css3之圓角

pan 技術分享 eight borde 一半 ack order css3 版本號瀏覽器支持表格中的數字表示支持該屬性的第一個瀏覽器的版本號。 -webkit- 或 -moz- 前面的數字表示支持該前綴的第一個版本。 CSS3 border-radius 屬性使用

css3之box-shadow

.cn 代碼 alt -s height css3 spa 投影邊緣 box-shadow是向盒子添加陰影。支持添加一個或者多個。用法： box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴展半徑] [陰影顏色] [投影方式]; 代碼： .

NGUI研究之3D模型坐標轉2D屏幕坐標-血條

uic bject blank orm 組成自己 index lan rac ?? 剛好今天有朋友問我，比較典型的樣例就是遊戲裏面人物的血條。原理非常easy就是把3D點換算成2D的點。可是因為NGUI自身是3D所以我們須要先把NGUI下的點轉成2D點。然後在把他轉成

Highcharts之3D柱狀圖

containe img charset pre mar tex -type 公司 css 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta http-

【轉載】CSS3之Clip（裁剪）拓展閱讀

很多 fix 以及 flow script stat browser hid 一定的 Clip屬性是大家經常會誤解的一個屬性，這篇文章幫助大家充分的了解和學習clip屬性，用這個屬性制作出更好的效果。我可以確定Clip屬性有很多同學並不知道，因為這個屬性使用率非常的底，我

css3之grid

script 間距 blog es2017 bsp alt grid 情況 highlight 瀏覽器的支持情況使用grid的時候必須給它一個確切的行數和列數 .grid-style{ display:grid; grid-template-co

CSS3 Tranform 3D 的應用

ase strong display hid tez /word 視圖位置查看 CSS3 Tranform 3D 的應用一、perspective 屬性 1. 作用：設置元素被查看位置的視圖，類似於眼睛到屏幕的距離，一般跟 perspective-origin 共同

圖形解析理解 css3 之傾斜屬性skew()

pac left absolute IT itl 技術分享 .com head idt 1、作用改變元素在頁面中的形狀2、語法屬性：transform 函數： 1、skew(xdeg) 向橫向傾斜指定度數 x取值為正

CSS3之超出隱藏

tex 圖片 clas space png wrap white com targe html <td ><a class="link" href="{$vo.link}" target="_blank

CSS3之邊框圓角的設置案例

alt after 技術 size 有色 type block 圖形 enter <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <tit

css3之移動平臺資源

表單 touch 滾動顏色禁止有意思 splay 估計 max 隨著移動端越來越普及，前端技術也是百花齊放，但目前移動平臺的技術已經趨向於成熟，記得剛實習的時候就是接觸的移動端，但現在2年多來，期間遇到了很多莫名其妙的問題，見證了手機用戶量的突飛猛進，興喜的是更多的人

css3之3D立方體

相關推薦