立方体的旋转特效
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>立方体旋转特效</title><style>@keyframes rotate{from{transform: rotate3d(0,0,0,0);}to{transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);}}*{margin: 0;padding: 0;list-style: none;}.main{margin: 200px auto;position: relative;width: 400px;height: 400px;transform-style: preserve-3d;animation: rotate 10s infinite linear;}.main>div{position: absolute;top: 0;left: 0;width: 400px;height: 400px;opacity: 0.8;background-size: 100% 100%;}/* 前 */.one{transform: translateZ(200px);background-image: url(./images/jd1.jpg);}/* 后 */.two{transform: translateZ(-200px) rotateX(180deg);background-image: url(./images/jd2.jpg);}/* 左 */.three{transform: translateX(-200px) rotateY(270deg);background-image: url(./images/jd3.jpg);}/* 右 */.four{transform: translateX(200px) rotateY(90deg);background-image: url(./images/jd4.jpg);}/* 上 */.five{transform: translateY(-200px) rotateX(90deg);background-image: url(./images/jd5.jpg);}/* 下 */.six{transform: translateY(200px) rotateX(270deg);background-image: url(./images/jd6.jpg);}</style>
</head>
<body><div class="main"><div class="one"></div><div class="two"></div><div class="three"></div><div class="four"></div><div class="five"></div><div class="six"></div></div>
</body>
</html>
效果展示：
立方体旋转特效
