<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
perspective: 800px;
}
.stage{
position: relative;
width: 200px;
height: 200px;
margin: 400px auto;
/*box-shadow: 0 0 20px 0 black;*/
transform-style: preserve-3d;
transition: 2s;
}
.stage:hover{
transform: rotateY(360deg);
}
.stage:hover>.top{
transform: translateZ(-100px) rotateX(230deg);
/*transform: rotateY(360deg) rotateX(360deg);*/
}
.stage:hover>.stage-1{
transform: translateY(-200px);
}
.stage>.face{
position: absolute;
left: 0;
right: 0;
width: 200px;
height: 200px;
box-shadow: 0 0 30px 0 blue inset;
}
.stage>.front{
transform: translateZ(100px);
}
.stage>.behind{
transform:rotateY(180deg) translateZ(100px);
}
.stage>.left{
transform: rotateY(-90deg) translateZ(100px);
}
.stage>.right{
transform: rotateY(90deg) translateZ(100px);
}
.stage>.top{
/*transform: rotateX(90deg) translateZ(100px);*/
/*开盖需要换走位*/
transform-origin: top center;
transform: translateZ(-100px) rotateX(90deg);
transition-duration: 2s;
}
.stage>.bottom{
transform: rotateX(-90deg) translateZ(100px);
}
.stage .stage-1{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100px;
height: 100px;
margin: auto;
/*box-shadow: 0 0 30px 0 inset;*/
transform-style: preserve-3d;
transition: 2s;
}
.stage .stage-1 .face {
position: absolute;
width: 100px;
height: 100px;
box-shadow: 0 0 30px 0 blue inset;
}
.stage-1>.front{
background-image: url("img/立方体/1.jpg");
transform: translateZ(50px);
}
.stage-1>.behind{
background-image: url("img/立方体/2.jpg");
transform:rotateY(180deg) translateZ(50px);
}
.stage-1>.left{
background-image: url("img/立方体/3.jpg");
transform: rotateY(-90deg) translateZ(50px);
}
.stage-1>.right{
background-image: url("img/立方体/4.jpg");
transform: rotateY(90deg) translateZ(50px);
}
.stage-1>.top{
background-image: url("img/立方体/5.jpg");
transform: rotateX(90deg) translateZ(50px);
}
.stage-1>.bottom{
background-image: url("img/立方体/6.jpg");
transform: rotateX(-90deg) translateZ(50px);
}
</style>
</head>
<body>
<div class="stage">
<div class="face front">前</div>
<div class="face behind">后</div>
<div class="face top">上</div>
<div class="face bottom">下</div>
<div class="face left">左</div>
<div class="face right">右</div>
<div class="stage-1">
<div class="face front">前</div>
<div class="face behind">后</div>
<div class="face top">上</div>
<div class="face bottom">下</div>
<div class="face left">左</div>
<div class="face right">右</div>
</div>
</div>
</body>
</html>
Python3Turtle
