jQuery+CSS3 3D立方体旋转图标菜单

jQuery+CSS3 3D立方体旋转图标菜单

jQuery+CSS3 3D立方体旋转图标菜单

新建html文档。

书写hmtl代码。

书写css代码。

body { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #E7EAE3; box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.4); }

ul { list-style: none; margin: 0; padding: 0; }

p { line-height: 22px; position: absolute; left: 0; font-size: 12px; right: 0; color: rgba(255, 255, 255, 0.5); font-style: italic; }

nav { height: 240px; width: 240px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; perspective: 1000px; }

h2 { color: #9EA7B3; font-weight: normal; font-style: italic; text-align: center; font-size: 18px; margin-top: -40px; visibility: hidden; }

h3 { color: rgba(255, 255, 255, 0.3) !important; cursor: default; font-weight: normal; margin: 0; line-height: 42px; font-size: 14px; }

.side { color: white; background-color: #2C2C2C; box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); }

书写并添加js代码。

代码整体结构。

查看效果。