使用6张图片，组成一个3d的立方体，使得在页面上进行转动显示出来。并且，当鼠标放在这个立方体上面，这6张图片就直接炸开。
主要用到transfrom进行位移和旋转。使用transform-style:preserve-3d，开启使用3d效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>day6</title>
<style type="text/css">
body{
perspective: 800px; /*视距*/
}
@keyframes myAnimation {
from{
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
to{
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
.conteainer{
position: relative;
width: 200px;
height: 200px;
margin: 300px auto;
transform-style:preserve-3d;
/*transform: rotateX(30deg);*/
transform: rotateY(30deg);
border: 1px solid red;
animation: myAnimation 10s infinite linear;
}
.conteainer > img{
width: 200px;
height: 200px;
position: absolute;
}
.conteainer>img:nth-child(1)
{
}
.conteainer:hover > img:nth-child(1)
{
transform: translateZ(-200px);
}
.conteainer:hover > img:nth-child(2)
{
transform: translateX(-200px) rotateY(90deg);
}
.conteainer>img:nth-child(2)
{
left: -200px;
transform: rotateY(90deg);
transform-origin: right;
}
.conteainer:hover > img:nth-child(3)
{
transform: translateX(200px) rotateY(-90deg);
}
.conteainer>img:nth-child(3)
{
right: -200px;
transform-origin: left;
transform: rotateY(-90deg);
}
.conteainer:hover > img:nth-child(4)
{
transform: translateY(-200px) rotateX(-90deg);
}
.conteainer>img:nth-child(4)
{
top:-200px;
transform-origin: bottom;
transform: rotateX(-90deg);
}
.conteainer:hover > img:nth-child(5)
{
transform: translateY(200px) rotateX(90deg);
}
.conteainer>img:nth-child(5)
{
bottom: -200px;
transform-origin: top;
transform: rotateX(90deg);
}
.conteainer>img:nth-child(6)
{
transform: translateZ(200px);
}
.conteainer:hover > img:nth-child(6)
{
transform: translateZ(400px) ;
}
</style>
</head>
<body>
<div class="conteainer">
<img src="./img/3.jpg" alt="">
<img src="./img/3.jpg" alt="">
<img src="./img/3.jpg" alt="">
<img src="./img/3.jpg" alt="">
<img src="./img/3.jpg" alt="">
<img src="./img/3.jpg" alt="">
</div>
</body>
</html>
当鼠标移上去后：
