CSS3实现旋转立方体
轻松实现带图片旋转立方体盒子
需要使用 transform,@keyframes, animation这三个重要的属性
实现基本的布局,让父盒子成为3D的舞台,让父盒子X,Y轴各转20deg方便我们观察
<div class="parbox"> <div class="son before"></div> <div class="son after"></div> <div class="son left"></div> <div class="son right"></div> <div class="son top"></div> <div class="son bottom"></div> </div>
<style> * { margin: 0; padding: 0; } .parbox { width: 300px; height: 300px; position: fixed; left: 0;right: 0; top: 0;bottom: 0; margin: auto; background-color: purple; transform-style: preserve-3d; transform: rotateX(20deg) rotateY(20deg); } .son { width: 300px; height: 300px; position: absolute; left: 0;top: 0; background-color:yellow; } </style>
利用transform实现立方体的六个面
正面
.before { transform:translateZ(150px); }
背面
.after { transform:translateZ(-150px) rotateY(180deg); }
上面
.top{ transform: translateY(-150px) rotateX(90deg); }
下面
.bottom { transform: translateY(150px) rotateX(-90deg); }
左面
.left { transform: translateX(-150px) rotateY(-90deg); }
右面
.right { transform: translateX(150px) rotateY(90deg); }
@keyframes指定关键帧
@keyframes Rotate { 0% { transform:rotateY(0deg) rotateX(0deg); } 25% { transform:rotateY(90deg) rotateX(90deg); } 50% { transform: rotatey(180deg) rotateX(0deg); } 75% { transform:rotateY(270deg) rotateX(-90deg); } 100% { transform: rotateY(360deg) rotateX(0deg); } }
animation引用关键帧
.parbox{ animation: Rotate 10s infinite linear; }
往六个面添加图片
<div class="parbox"> <div class="son before"><img src="./images/x.jpg" alt=""></div> <div class="son after"><img src="./images/x.jpg" alt=""></div> <div class="son left"><img src="./images/x.jpg" alt=""></div> <div class="son right"><img src="./images/x.jpg" alt=""></div> <div class="son top"><img src="./images/x.jpg" alt=""></div> <div class="son bottom"><img src="./images/x.jpg" alt=""></div> </div>
.son img { ? display: block; ? width: 100%; ? height: 100%; ? }
这样一个带图片旋转的立方体盒子就实现了
- 我们还可以增加鼠标移入停止旋转
.parbox:hover { animation-play-state: paused; }
- 鼠标移入图片放大效果
.before img:hover { transform: scale(1.5); }
效果图
css样式
<style> * { margin: 0; padding: 0; } .parbox { width: 300px; height: 300px; position: fixed; left: 0;right: 0; top: 0;bottom: 0; margin: auto; transform-style: preserve-3d; /* transform: rotateX(20deg) rotateY(20deg); */ animation: Rotate 10s infinite linear; } .parbox:hover { animation-play-state: paused; } .son { width: 200px; height: 200px; position: absolute; left: 0;top: 0; } .son img { display: block; width: 100%; height: 100%; transition: 1s; } .before { transform:translateZ(150px); } .after { transform:translateZ(-150px) rotateY(180deg); } .top { transform: translateY(-150px) rotateX(90deg); } .bottom { transform: translateY(150px) rotateX(-90deg); } .left { transform: translateX(-150px) rotateY(-90deg); } .right { transform: translateX(150px) rotateY(90deg); } .after img:hover { transform: scale(1.5); } .before img:hover { transform: scale(1.5); } .left img:hover { transform: scale(1.5); } .right img:hover { transform: scale(1.5); } .top img:hover { transform: scale(1.5); } .bottom img:hover { transform: scale(1.5); } @keyframes Rotate { 0% { transform:rotateY(0deg) rotateX(0deg); } 25% { transform:rotateY(90deg) rotateX(90deg); } 50% { transform: rotatey(180deg) rotateX(0deg); } 75% { transform:rotateY(270deg) rotateX(-90deg); } 100% { transform: rotateY(360deg) rotateX(0deg); } } </style>