任务
首先制作一个正方体,然后当鼠标悬停在正方体上时,正方体旋转。
效果图
思路
正方体是由六个面组成,因此我们可以首先将六个相同大小的面叠在一起,然后通过对这几个面经过不同的旋转和位移,组成一个正方体,再添加动画效果。
xml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01.html</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
margin: 100px auto;
position: relative;
/* 3D效果实现 */
perspective: 300px;
}
/* 让这六个面叠加在一起,都在div中 */
div p{
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
div p:nth-child(1){
/* 前 */
background-color: rgba(255, 0, 0, 0.5);
transform: translateZ(100px);
}
div p:nth-child(2){
/* 后 */
background-color: rgba(167, 154, 154, 0.5);
transform: translateZ(-100px);
}
div p:nth-child(3){
/* 左 */
background-color: rgba(208, 255, 0, 0.5);
transform: rotateY(90deg) translateZ(-100px);
}
div p:nth-child(4){
/* 右 */
background-color: rgba(0, 255, 0, 0.5);
transform: rotateY(-90deg) translateZ(-100px);
}
div p:nth-child(5){
/* 上 */
background-color: rgba(0, 255, 200, 0.5);
transform: rotateX(90deg) translateZ(100px);
}
div p:nth-child(6){
/* 下 */
background-color: rgba(0, 140, 255, 0.5);
transform: rotateX(90deg) translateZ(-100px);
}
</style>
</head>
<body>
<div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</body>
</html>
此时效果图如下
然后在添加动画效果
xml
<body>
<!-- 再加一个舞台,让整个box盒子带着里面的p旋转 -->
<section>
<div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</section>
</body>
xml
<style>
*{
margin: 0;
padding: 0;
}
section{
width: 200px;
height: 200px;
margin: 100px auto;
/* 调整效果显的更加正方体 */
perspective: 10000px;
}
/* 即是section的演员,又是p的舞台 */
div{
width: 200px;
height: 200px;
/* 调整效果显的更加正方体 */
perspective: 10000px;
position: relative;
/* 设置变形类型,保留它内部的3D效果 */
/* 这个盒子又是舞台,又是演员,这个box整体带着里面的p旋转 */
transform-style: preserve-3d;
transition: transform 5s linear 0s;
}
section:hover div{
transform: rotateX(360deg) rotateY(360deg);
}
... ...
</style>
此时满足效果图要求