<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3d</title>
<link rel="stylesheet" href="D:\桌面\网页设计\7\3d.css">
</head>
<body>
<div class="a">
<div class="inner">a</div>
<div class="inner">b</div>
<div class="inner">c</div>
<div class="inner">d</div>
<div class="inner">e</div>
<div class="inner">f</div>
</div>
</body>
</html>
.a{
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-top:-150px;
margin-left: -150px;
transform-style: preserve-3d;
transform: rotateX(30deg) rotateY(30deg) rotateZ(30deg);
}
.a:hover{
animation:dh 5s ease-in-out infinite;
cursor: pointer;
}
.inner{
width: 300px;
height: 300px;
position: absolute;
left:0;
top: 0;
opacity: 50%;
background-color: #0cc;
}
.inner:nth-child(1){
transform: translateZ(150px);
}
.inner:nth-child(2){
transform: translateZ(-150px);
}
.inner:nth-child(3){
transform: rotateY(90deg) translateZ(150px);
}
.inner:nth-child(4){
transform: rotateY(90deg) translateZ(-150px);
}
.inner:nth-child(5){
transform: rotateX(90deg) translateZ(150px);
}
.inner:nth-child(6){
transform: rotateX(90deg) translateZ(-150px);
}
@keyframes dh{
0%{
transform: rotateX(0) rotateY(0) rotateZ(0);
}
100%{
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
