3D模仿样式旋转

书写css代码。#choose-time { margin: 80px auto; width: 300px; text-align: center; }#set-button, #submit { background-color: #888; color: #fff; -webkit-border-radius: 3px; border-radius: 3px; padding: 2px 6px; padding-bottom: 4px; cursor: pointer; margin-left: 5px; opacity: 0.95; filter: alpha(opacity=95); -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=95)'; font-size: 20px; }#set-button:hover, #submit:hover { opacity: 1; -ms-filter: none; filter: none; }.demo { margin: 0 auto; -webkit-filter: drop-shadow(30px 30px 23px rgba(0, 0, 0, 0.3)); -moz-filter: drop-shadow(30px 30px 23px rgba(0, 0, 0, 0.3)); filter: drop-shadow(30px 30px 23px rgba(0, 0, 0, 0.3)); }#hexaflip-demo1, #hexaflip-demo2 { margin-bottom: 4rem; }#hexaflip-demo1 .hexaflip-cube, #hexaflip-demo2 .hexaflip-cube { opacity: 0.9; filter: alpha(opacity=90); -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)'; }#hexaflip-demo1 .hexaflip-cube .hexaflip-left, #hexaflip-demo2 .hexaflip-cube .hexaflip-left, #hexaflip-demo1 .hexaflip-cube .hexaflip-right, #hexaflip-demo2 .hexaflip-cube .hexaflip-right { background-color: #222 !important; }#hexaflip-demo1 .hexaflip-cube > div, #hexaflip-demo2 .hexaflip-cube > div { font-weight: 100; text-shadow: none; }#hexaflip-demo1 .hexaflip-cube > div:nth-child(1n+1), #hexaflip-demo2 .hexaflip-cube > div:nth-child(1n+1) { background-color: #069ad5; }#hexaflip-demo1 .hexaflip-cube > div:nth-child(2n+2), #hexaflip-demo2 .hexaflip-cube > div:nth-child(2n+2) { background-color: #fc5215; }#hexaflip-demo1 .hexaflip-cube > div:nth-child(3n+3), #hexaflip-demo2 .hexaflip-cube > div:nth-child(3n+3) { background-color: #30b71d; }#hexaflip-demo1 .hexaflip-cube > div:nth-child(4n+4), #hexaflip-demo2 .hexaflip-cube > div:nth-child(4n+4) { background-color: #eee; color: #222; }#hexaflip-demo2 { margin-bottom: 6rem; }#hexaflip-demo5 .hexaflip-cube > div { color: rgba(255, 255, 255, 0.3); font-weight: 900 !important; letter-spacing: -3px; text-shadow: none; }#hexaflip-demo5 + div { margin-top: 80px; text-align: center; }.buttons { position: relative; top: 230px; width: 640px; margin: 0 auto; z-index: 100; }.disc-button { background-color: #222; color: #fff; text-align: center; width: 30px; height: 30px; -webkit-border-radius: 100%; border-radius: 100%; font-weight: 100; font-size: 24px; cursor: pointer; }.disc-button:hover { opacity: 0.8; filter: alpha(opacity=80); -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)'; }#prev { float: left; }#next { float: right; }#output { line-height: 2; }

书写并添加js代码。

代码整体结构。

查看效果。