分享一个用CSS 3.0实现的书桌3D特效,效果如下:
实现代码如下,欢迎大家复制粘贴。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 3.0实现书桌3D效果</title>
<style>
* {
margin: 0;
padding: 0;
}
.table {
width: 400px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin: -150px 0 0 -200px;
transform-style: preserve-3d;
animation: change 8s linear 0s infinite;
}
.table div {
position: absolute;
}
.table1 {
width: 400px;
height: 300px;
background: #cdd;
color: red;
text-align: center;
font-size: 50px;
line-height: 150px;
transform: rotateX(30deg);
}
.table2 {
width: 400px;
height: 300px;
background: #ced;
transform-style: preserve-3d;
transform: rotateX(30deg) translateZ(-30px);
}
.table2 .left {
width: 30px;
height: 300px;
background: #ddd;
transform-origin: left center;
transform: rotateY(-90deg);
}
.table2 .before {
width: 400px;
height: 30px;
background: #eee;
left: 0;
bottom: 0;
transform-origin: bottom center;
transform: rotateX(-90deg);
}
.table2 .right {
width: 30px;
height: 300px;
background: #bbb;
right: 0;
bottom: 0;
transform-origin: right center;
transform: rotateY(90deg);
}
.table2 .after {
width: 400px;
height: 30px;
background: #aaa;
left: 0;
top: 0;
transform-origin: top center;
transform: rotateX(90deg);
}
.table2 .least {
width: 30px;
height: 30px;
background: red;
position: absolute;
transform-style: preserve-3d;
transform: translateZ(-200px);
}
.table2 .least1 {
left: 20px;
top: 20px;
}
.table2 .least2 {
right: 20px;
top: 20px;
}
.table2 .least3 {
left: 20px;
bottom: 20px;
}
.table2 .least4 {
right: 20px;
bottom: 20px;
}
.table2 .least .least_left {
width: 200px;
height: 30px;
background: blue;
position: absolute;
left: -100px;
top: 0;
transform: rotateY(90deg) translateX(-100px);
}
.table2 .least .least_before {
width: 30px;
height: 200px;
background: pink;
position: absolute;
left: 100px;
top: 0;
transform: rotateX(90deg) translateY(100px) translateX(-100px) translateZ(70px);
}
.table2 .least .least_right {
width: 200px;
height: 30px;
background: green;
position: absolute;
right: 100px;
top: 0;
transform: rotateY(90deg) translateX(-100px) translateZ(200px);
}
.table2 .least .least_after {
width: 30px;
height: 200px;
background: yellow;
position: absolute;
left: 100px;
top: 0;
transform: rotateX(90deg) translateX(-100px) translateY(100px) translateZ(100px);
}
@keyframes change {
from {
transform: rotateX(40deg) rotateY(0deg);
}
to {
transform: rotateX(40deg) rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="table">
<div class="table1">
好好学习<br />天天向上
</div>
<div class="table2">
<div class="left"></div>
<div class="before"></div>
<div class="right"></div>
<div class="after"></div>
<div class="least least1">
<div class="least_left"></div>
<div class="least_before"></div>
<div class="least_right"></div>
<div class="least_after"></div>
</div>
<div class="least least2">
<div class="least_left"></div>
<div class="least_before"></div>
<div class="least_right"></div>
<div class="least_after"></div>
</div>
<div class="least least3">
<div class="least_left"></div>
<div class="least_before"></div>
<div class="least_right"></div>
<div class="least_after"></div>
</div>
<div class="least least4">
<div class="least_left"></div>
<div class="least_before"></div>
<div class="least_right"></div>
<div class="least_after"></div>
</div>
</div>
</div>
</body>
</html>