网上大都是正方体的效果，由于做一个东西需要，写了一个HTML+css3实现的长方体，有需要的也可以看看。 2017-07-25 21:30:23
效果图如下:
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html+css3实现长方体效果</title>
<link rel="stylesheet" href="css/cuboid.css" />
</head>
<body>
<div class="square-box">
<div class="front"></div>
<div class="bottom"></div>
<div class="back"></div>
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
css代码
.square-box{
width: 200px;
height: 100px;
box-sizing: border-box;
position: relative;
transform-style: preserve-3d;
/*设置动画 三者分别为：动画名 执行一次时间 执行方式*/
animation: rotateanimation 5s ease;
animation-iteration-count: infinite;/*令动画无限执行下去*/
animation-timing-function: linear;/*匀速*/
margin:200px auto;
}
.square-box>div{
position: absolute;
}
/*设置六面的视角*/
.square-box>.front{
width: 200px;
height: 100px;
transform: translateZ(50px);
background:red;
}
.square-box>.bottom{
width: 200px;
height: 100px;
transform: rotateX(270deg) translateZ(50px);
background:deeppink;
}
.square-box>.back{
width: 200px;
height: 100px;
transform: translateZ(-50px);
background:darkcyan;
}
.square-box>.top{
width: 200px;
height: 100px;
transform: rotateX(90deg) translateZ(50px);
background: yellow;
}
.square-box>.left{
width: 100px;
height: 100px;
transform: rotateY(270deg) translateZ(50px);
background: black;
}
.square-box>.right{
width: 100px;
height: 100px;
transform: rotateY(90deg) translateZ(150px);
background: #a7cbf0;
}
/*添加动画效果*/
@keyframes rotateanimation{
0%{
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
100%{
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。
取值：
flat 子元素将不保留其 3D 位置。
preserve-3d 子元素将保留其 3D 位置。
制作出长方体后你可以再加些自己想要的特效，div中可插入图片什么的会更好看些。