边长、边数可配置的旋转多面体

￡神魔★判官ぃ 2022-08-22 05:49 135阅读 0赞

效果点击这里 [https://jsbin.com/kakoxe/edit?html,css,js,output][https_jsbin.com_kakoxe_edit_html_css_js_output]  
或者看这里 [http://codepen.io/GitKou/pen/GqKZGW][http_codepen.io_GitKou_pen_GqKZGW] (这里加了rotate3d(1,1,0,100deg)，使得沿对角线转)

css3画出来的多面体，这个多面体的每个侧面都是正方形，底面是个边数可配置的多面体 buildPolyhedron(10, 300);

几个点：

1.  屏幕居中
2.  景深perspective
3.  transform-style: preserve-3d
    
    > transform-style属性也是3D效果中经常使用的，其两个参数，flat|preserve-3d. 前者flat为默认值，表示平面的；后者preserve-3d表示3D透视。preserve-3d符合我们真实世界的思维认识。比方说，你让妹子右转了45度，此时妹子脑袋左转45度想你吐舌卖萌，妹子的脸蛋应该和你是面对面平行的。  
    > 应用transform-style:  
    > preserve-3d声明的元素确实是这样表现的，但是，如果使用默认的flat值，其效果表现——恕我想象力有限——想不通：妹子的脸还是左转45度的，同时脑袋似乎移到了身体以外的地方！因此，基本上，我们想要根据现实经验实现一些3D效果的时候，transform-style:  
    > preserve-3d是少不了的。一般而言，该声明应用在3D变换的兄弟元素们的父元素上，也就是舞台元素。
4.  transform-origin
5.  backface-visibility
6.  找到多面体的内接球的球心，即多面体的旋转中心
    
    html：

<!DOCTYPE HTML>
    <html>
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" href="cubeRotate.css">
        <title>无标题文档</title>
    </head>
    
    <body>
        <div class="container">
            <div class="cube">
            </div>
        </div>
        <script src="cubeRotate.js"></script>
    </body>
    
    </html>

css:

/* Define the container div, the cube div, and a generic face */
    
    body { margin: 0; }
    
    .container { width: 100%; height: 100%; position: absolute; perspective-origin: center; perspective: 500px; overflow: hidden; }
    
    .cube { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); backface-visibility: visible; transform-style: preserve-3d; animation: cubeRotate 15s linear infinite; }
    
    @keyframes cubeRotate {
        0% { transform: translate(-50%, -50%) rotateY(0deg); }
        100% { transform: translate(-50%, -50%) rotateY(360deg); }
    }
    
    .face { display: block; position: absolute; width: 100%; height: 100%; border: none; font-family: sans-serif; font-size: 60px; color: white; text-align: center; background: rgba(0, 0, 0, 0.3); }

js:

![这里写图片描述][20160525144337904]  
![这里写图片描述][20160525152121846]  
参考资料：  
1. [https://24ways.org/2010/intro-to-css-3d-transforms/][https_24ways.org_2010_intro-to-css-3d-transforms]  
2. [https://www.w3.org/Talks/2012/0416-CSS-WWW2012/Demos/transforms/demo-rotate3d.html][https_www.w3.org_Talks_2012_0416-CSS-WWW2012_Demos_transforms_demo-rotate3d.html]  
3. [http://www.w3cplus.com/css3/css3-3d-transform.html][http_www.w3cplus.com_css3_css3-3d-transform.html]

[https_jsbin.com_kakoxe_edit_html_css_js_output]: https://jsbin.com/kakoxe/edit?html,css,js,output
[http_codepen.io_GitKou_pen_GqKZGW]: http://codepen.io/GitKou/pen/GqKZGW
[20160525144337904]: /images/20220722/77f1c8d14b1f478da7b6be385b414d90.png
[20160525152121846]: /images/20220722/4850ea646cec4352a2f85d287d7e45c9.png
[https_24ways.org_2010_intro-to-css-3d-transforms]: https://24ways.org/2010/intro-to-css-3d-transforms/
[https_www.w3.org_Talks_2012_0416-CSS-WWW2012_Demos_transforms_demo-rotate3d.html]: https://www.w3.org/Talks/2012/0416-CSS-WWW2012/Demos/transforms/demo-rotate3d.html
[http_www.w3cplus.com_css3_css3-3d-transform.html]: http://www.w3cplus.com/css3/css3-3d-transform.html