{"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