CSS3通过3D变换立体旋转相册

川长思鸟来 2022-04-14 02:57 316阅读 0赞

图片镇楼：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70][]

`声明：本来想做一个多面体相册的，但是在网上没有找到例子，最终完整代码是在一个英文程序网站上copy的，但是没有解释，我把大体实现流程解释了一遍，旋转真的是绕蒙我了····`  
  
`代码： <!DOCTYPE html> <html> <head> <title>二十面体</title> <style type="text/css"> html, body { height: 100%; margin: 0; background: rgba(0, 0, 0,1); } .sharp { animation: ani 4s linear infinite; } div { transform-style: preserve-3d; transform: translate(-50%, -50%) rotate3d(0, 1, 0, 72deg); position: absolute; left: 50%; top: 50%; } span { /*利用边框做一个三角形*/ border-color: transparent transparent rgba(255, 255, 255, 0.5) transparent;/*每个span下方设置颜色，其余边透明*/ border-width: 173.2px 100px; border-style: solid; width: 0; height: 0; position: absolute; left: 50%; margin-left: -100px; top: 50%; margin-top: -346.4px; } span:before { /*利用边框在span中做一个三角形，实现嵌套，让span变成边框,span:before变成要显示的东西*/ content: ''; border-color: transparent transparent rgba(0, 123, 123, 0.5) transparent;/*设置每面的颜色*/ border-width: 165.2px 92px; border-style: solid; width: 0; height: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin-top: 4px; } div span:nth-child(1) { transform: rotate3d(0, 1, 0, 72deg) rotate3d(1, 0, 0, 51.5deg); } div span:nth-child(2) { transform: rotate3d(0, 1, 0, 144deg) rotate3d(1, 0, 0, 51.5deg); } div span:nth-child(3) { transform: rotate3d(0, 1, 0, 216deg) rotate3d(1, 0, 0, 51.5deg); } div span:nth-child(4) { transform: rotate3d(0, 1, 0, 288deg) rotate3d(1, 0, 0, 51.5deg); } div span:nth-child(5) { transform: rotate3d(0, 1, 0, 360deg) rotate3d(1, 0, 0, 51.5deg); } .sharp div:nth-child(1) { transform: translateY(51px) rotateY(108deg) rotateX(116deg) translateZ(31px); } .sharp div:nth-child(2) { transform: translateY(51px) rotateY(180deg) rotateX(116deg) translateZ(31px); } .sharp div:nth-child(3) { transform: translateY(51px) rotateY(252deg) rotateX(116deg) translateZ(31px); } .sharp div:nth-child(4) { transform: translateY(51px) rotateY(324deg) rotateX(116deg) translateZ(31px); } .sharp div:nth-child(5) { transform: translateY(51px) rotateY(396deg) rotateX(116deg) translateZ(31px); } @keyframes ani { 100% { transform: rotateY(360deg); } } </style> </head> <body> <div class="sharp"> <div> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </div> </body> </html>`

代码大体解读

**一、**

**span** \{                       */\*利用边框做一个三角形\*/*  
*  ***border-color**: **transparent transparent** **rgba**(255, 255, 255, 0.5) **transparent**;*/\*每个span下方设置颜色，其余边透明\*/*  
*  ***border-width**: 173.2**px** 100**px**;  
  **border-style**: **solid**;  
  **width**: 0;  
  **height**: 0;  
  **position**: **absolute**;  
  **left**: 50%;  
  **margin-left**: -100**px**;  
  **top**: 50%;  
  **margin-top**: -346.4**px**;  
\}

**span**:**before** \{          */\*利用边框在span中做一个三角形，实现嵌套，让span变成边框,span:before变成要显示的东西\*/*  
*  ***content**: **''**;  
  **border-color**: **transparent transparent** **rgba**(0, 123, 123, 0.5) **transparent**;*/\*设置每面的颜色\*/*  
*  ***border-width**: 165.2**px** 92**px**;  
  **border-style**: **solid**;  
  **width**: 0;  
  **height**: 0;  
  **position**: **absolute**;  
  **left**: 50%;  
  **top**: 50%;  
  **transform**: **translate**(-50%, -50%);  
  **margin-top**: 4**px**;  
\}

先用一个0宽0高的盒子，将盒子的边框设置宽度

**  border-width**: 173.2**px** 100**px**;  
  **border-style**: **solid**;  
  **width**: 0;  
  **height**: 0;

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70 1][]

再将左  上   右颜色属性变为透明

**border-color**: **transparent transparent** **blue** **transparent**;

左  上   右都会看不见，就只剩下下边的，这样就变成一个三角形了

![201811231520555.png][]

**span**:**before 就****是在三角形上在加一个三角形起到duo**多出一个像边框的效果

![20181123152207644.png][]

**二、**

**一个div中有五个span，那么通过上一步就做成了五个三角形，****将这五个三角形进行3D位移加旋转**

**html**

<**div**>  
  <**span**></**span**>  
  <**span**></**span**>  
  <**span**></**span**>  
  <**span**></**span**>  
  <**span**></**span**>  
</**div**>

**css**

**div span**:**nth-child**(1) \{   
  **transform**: **rotate3d**(0, 1, 0, 72**deg**) **rotate3d**(1, 0, 0, 51.5**deg**);  
\}  
  
**div span**:**nth-child**(2) \{   
  **transform**: **rotate3d**(0, 1, 0, 144**deg**) **rotate3d**(1, 0, 0, 51.5**deg**);  
\}  
**div span**:**nth-child**(3) \{   
  **transform**: **rotate3d**(0, 1, 0, 216**deg**) **rotate3d**(1, 0, 0, 51.5**deg**);  
\}  
**div span**:**nth-child**(4) \{   
  **transform**: **rotate3d**(0, 1, 0, 288**deg**) **rotate3d**(1, 0, 0, 51.5**deg**);  
\}  
**div span**:**nth-child**(5) \{   
  **transform**: **rotate3d**(0, 1, 0, 360**deg**) **rotate3d**(1, 0, 0, 51.5**deg**);  
\}

** 变成这样   ****盖子****一共由五个三角形组成**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70 2][]

三、将上步的div做一个整体的3d变换

.**sharp div**:**nth-child**(1) \{   
  **transform**: **translateY**(51**px**) **rotateY**(108**deg**) **rotateX**(116**deg**) **translateZ**(31**px**);  
\}

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70 3][]

四、

在HTML中再加一个div，也进行整体移动，两者有重合的三角形  
.**sharp div**:**nth-child**(2) \{   
  **transform**: **translateY**(51**px**) **rotateY**(180**deg**) **rotateX**(116**deg**) **translateZ**(31**px**);  
\}

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70 4][]

五、

再加三个div，继续变换，最终只差一个盖了

.**sharp div**:**nth-child**(3) \{   
  **transform**: **translateY**(51**px**) **rotateY**(252**deg**) **rotateX**(116**deg**) **translateZ**(31**px**);  
\}  
  
.**sharp div**:**nth-child**(4) \{   
  **transform**: **translateY**(51**px**) **rotateY**(324**deg**) **rotateX**(116**deg**) **translateZ**(31**px**);  
\}  
  
.**sharp div**:**nth-child**(5) \{   
  **transform**: **translateY**(51**px**) **rotateY**(396**deg**) **rotateX**(116**deg**) **translateZ**(31**px**);  
\}

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70 5][]

六、

在加一个div，不用变换，因为本来的位置就是盖

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70 6][]

七、最后加个旋转动画就可以了

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70]: /images/20220414/0e69bbbafd294497bbc385563b4a66fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70 1]: /images/20220414/d5a49c76948b4d86a8b3bea1adb9fabd.png
[201811231520555.png]: /images/20220414/624db50ca01a44979033e91186ba8279.png
[20181123152207644.png]: /images/20220414/55dd4655056d4c7dbb3aa26dac26ad82.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70 2]: /images/20220414/b6728ca8caeb4773a1ec045146e843f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70 3]: /images/20220414/70349d8082444c8c89db55ad679a1ec9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70 4]: /images/20220414/2ff1abfc73bf4fa283812e2fb7845031.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70 5]: /images/20220414/d84a2652c0624e7ca18af0272381088e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70 6]: /images/20220414/b9a876efcb4746329494dfc07930ee97.png