如何用JavaScript编写一个自动旋转的3D立方体动画效果？

本文共计5640个文字，预计阅读时间需要23分钟。

目录 + 示例 + 技术栈 + 源码 + CSS + JS + 雪花部分 + 示例 + 技术栈 + display: inline-block, block, inline元素的区别：display: block将元素显示为块级元素，可以更好地控制宽高、内外边距等。

目录

• 演示
• 技术栈
• 源码
• css
• js
• 雪花部分

演示

技术栈

display:inline-block，block，inline元素的区别:

display：block将元素显示为块级元素，从而可以更好地操控元素的宽高，以及内外边距，每一个块级元素都是从新的一行开始。

display : inline将元素显示为行内元素，高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度，不可以改变。多个相邻的行内元素排在同一行里，知道页面一行排列不下，才会换新的一行。

display：inline-block看上去值名inline-block是一个混合产物，实际上确是如此，将元素显示为行内块状元素，设置该属性后，其他的行内块级元素会排列在同一行。比如我们li元素一个inline-block，使其既有block的宽度高度特性，又有inline的同行特性，在同一行内有不同高度内容的元素时，通常要设置对齐方式如vertical-align:top;来使元素顶部对齐。