CSS3之3D魔方酷炫效果,鼠标随意拖拽,也可以点击。主要用的CSS3特效和JS来处理,废话不多说,先看下效果图:
直接上DEMO代码:html>
CSS3之3D魔方酷炫效果 - Web前端之家* {
margin: 0 auto;
padding: 0;
}
html {
background: linear-gradient(135deg, #000 0%, #333 80%);
/*渐变色*/
cursor: pointer;
height: 100%;
}
.content {
margin-top: 200px;
perspective: 1000px; /* 视距 */
}
.box {
width: 200px;
height: 200px;
position: relative;
color: #fffdf5;
font-size: 36px;
font-weight: bold;
text-align: center;
line-height: 200px;
transform-style: preserve-3d; /* 默认 2D */
transitio