{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"3D動畫效果現在越來越普及，已經被廣泛的應用到了各個平臺，比如阿里雲，華爲雲，webpack官網等。它可以更接近於真實的展示我們的產品和介紹，帶來極強的視覺衝擊感。所以說，爲了讓自己更加優秀，css3 3D動畫必不可少。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"你將學到","attrs":{}}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"CSS3 3D 轉換的常用API介紹","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"CSS3 3D 應用場景","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"CSS3 3D 實現一個立方體","attrs":{}}]}],"attrs":{}}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"開始","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"1.CSS3 3D 轉換的常用API介紹","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"首先先上一張css 3D的座標系：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/3f/3f13b83d7e6b6ae8e3c2801cb558a211.gif","alt":null,"title":"","style":[{"key":"width","value":"50%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"接下來我們來介紹幾個常用的api：","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"旋轉","attrs":{}}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"rotateX()","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"rotateY()","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"rotateZ()以上幾個api分別代表繞x，y，z軸旋轉，如下例子爲繞x軸旋轉的例子：","attrs":{}}]}],"attrs":{}}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/f3/f32797fe725e3b7b6df7311e24ab906b.gif","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"相關代碼如下：","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"\n\n \n
\n複製代碼","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"位移（Transform）","attrs":{}}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"translateX(x) 定義 3D 轉化，僅使用用於 X 軸的值","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"translateY(y) 定義 3D 轉化，僅使用用於 Y 軸的值","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"translateZ(z) 定義 3D 轉化，僅使用用於 Z 軸的值以上幾個api分別代表相對x，y，z軸的位移，如下例子爲向z軸位移的例子：","attrs":{}}]}],"attrs":{}}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/21/2163ade1493926971386c3ccfa31a2a5.gif","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這裏我們需要注意的是爲了能看出位移的效果，我們需要在父容器上加如下屬性：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":".d3-wrap {\n transform-style: preserve-3d;\n perspective: 500;\n /* 設置元素被查看位置的視圖 */\n -webkit-perspective: 500;\n}\n複製代碼","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"當爲元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身。代碼如下：","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":".d3-wrap {\n position: relative;\n width: 300px;\n height: 300px;\n margin: 120px auto;\n transform-style: preserve-3d;\n perspective: 500;\n -webkit-perspective: 500;\n transform: rotateX(0) rotateY(45deg);\n transform-origin: center center;\n}\n\n.transformZ {\n width: 200px;\n height: 200px;\n background-color: #06c;\n transition: transform 2s;\n animation: transformZ 6s infinite;\n}\n\n@keyframes transformZ {\n 0% {\n transform: translateZ(100px);\n }\n 100% {\n transform: translateZ(0);\n } \n}\n複製代碼","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"3D縮放","attrs":{}}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"scaleX(x) 給定一個 X 軸的3D 縮放轉換值","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"scaleY(x) 給定一個 Y 軸的3D 縮放轉換值","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"scaleZ(x) 給定一個 Z 軸的3D 縮放轉換值縮放設置和上面的類似，這裏就不做過多介紹了。","attrs":{}}]}],"attrs":{}}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"理論上說以上三種常見變換已經夠用了，值得關注的是我們要想讓元素呈現出3D效果，以下不可忽視的API也很重要：","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/8e/8e8e993e943fee00003395258ff7c815.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"2.CSS3 3D 應用場景","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"css 3D主要應用在網站的交互和模型效果上，比如：","attrs":{}}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"3D輪播圖","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"3D產品介紹","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"室內3D仿真","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"h5 3D活動頁面，比較典型的就是某年淘寶的年終總結H5","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"3D數據可視化成圖","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"3D模型圖其實如果css 3D用的熟悉了，一些基本的3D模型完全可以用css畫出來。","attrs":{}}]}],"attrs":{}}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"3.CSS3 3D 實現一個立方體","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/0f/0f3adbfcca0fdb4997e8d153e7726a0b.gif","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"核心思路就是用6個面去拼接，通過設置rotate和translate來調整相互之間的位置，如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/32/32494ff9d670b01830badb8170ea61b6.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"具體代碼如下：","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":".container {\n position: relative;\n width: 300px;\n height: 300px;\n margin: 120px auto;\n transform-style: preserve-3d;\n /* 爲了讓其更有立體效果 */\n transform: rotateX(-30deg) rotateY(45deg);\n transform-origin: 150px 150px 150px;\n animation: rotate 6s infinite;\n}\n.container .page {\n position: absolute;\n width: 300px;\n height: 300px;\n text-align: center;\n line-height: 300px;\n color: #fff;\n background-size: cover;\n}\n.container .page:first-child {\n background-image: url(./my.jpeg);\n background-color: rgba(0,0,0,.2);\n}\n.container .page:nth-child(2) {\n transform: rotateX(90deg);\n transform-origin: 0 0;\n transition: transform 10s;\n background-color: rgba(179, 15, 64, 0.6);\n background-image: url(./my2.jpeg);\n}\n\n.container .page:nth-child(3) {\n transform: translateZ(300px);\n background-color: rgba(22, 160, 137, 0.7);\n background-image: url(./my3.jpeg);\n}\n\n.container .page:nth-child(4) {\n transform: rotateX(-90deg);\n transform-origin: -300px 300px;\n background-color: rgba(210, 212, 56, 0.2);\n background-image: url(./my4.jpeg);\n}\n.container .page:nth-child(5) {\n transform: rotateY(-90deg);\n transform-origin: 0 0;\n background-color: rgba(201, 23, 23, 0.6);\n background-image: url(./my5.jpeg);\n}\n.container .page:nth-child(6) {\n transform: rotateY(-90deg) translateZ(-300px);\n transform-origin: 0 300px;\n background-color: rgba(16, 149, 182, 0.2);\n background-image: url(./my6.jpeg);\n}\n複製代碼","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"html結構","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"\n
\n複製代碼","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"擴展","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們可以基於上面介紹的，給父元素添加動畫或者拖拽效果，這樣就可以做成更有交互性的3D方塊了，比如","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"置骰子游戲","attrs":{}},{"type":"text","text":"，","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"vr場景","attrs":{}},{"type":"text","text":"，","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"3D相冊","attrs":{}},{"type":"text","text":"等等，具體實現我會抽空依次總結出來，記得關注哦～","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"最後","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果想了解更多webpack，node，gulp，css3，javascript，nodeJS，canvas等前端知識和實戰，歡迎在在微信搜索 ","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"趣談前端","attrs":{}},{"type":"text","text":" 一起學習討論，共同探索前端的邊界。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}
A
\n B
\n C
\n D
\n E
\n F
\n