应网友要求，也方便大家一起学习，在此贴出昨天编写旋转六面体源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>hexahedron</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style type="text/css">
.hexahedron {
margin: 100px auto;
width: 200px;
height: 200px;
perspective: 1000px;
perspective-origin: 50% 50%;
}
.top,
.bottom,
.left,
.right,
.front,
.back {
position: absolute;
top: 0px;
left: 0px;
border: 1px solid #000;
width: 200px;
height: 200px;
text-align: center;
font: bold 30px/200px "microsoft yahei";
opacity: .6;
transition: 1s;
}
.top {
animation: opentop 1s both linear 0s 1;
}
.bottom {
animation: openbottom 1s both linear 1s 1;
}
.left {
animation: openleft 1s both linear 2s 1;
}
.right {
animation: openright 1s both linear 3s 1;
}
.front {
animation: openfront 1s both linear 4s 1;
}
.back {
animation: openback 1s both linear 5s 1;
}
.all {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
animation: animation 6s both linear 6s infinite;
}
.all:hover .top {
color: #fff;
background: red;
}
.all:hover .bottom {
color: #fff;
background: orange;
}
.all:hover .left {
color: #fff;
background: yellow;
}
.all:hover .right {
color: #fff;
background: green;
}
.all:hover .front {
color: #fff;
background: cyan;
}
.all:hover .back {
color: #fff;
background: blue;
}
@keyframes opentop {
0% {
transform: none;
}
100% {
transform: translateZ(-100px) rotate3d(1, 0, 0, 90deg);
transform-origin: 0 0;
}
}
@keyframes openbottom {
0% {
transform: none;
}
100% {
transform: translateZ(-100px) rotate3d(1, 0, 0, -90deg);
transform-origin: 50% 100%;
}
}
@keyframes openleft {
0% {
transform: none;
}
100% {
transform: translateZ(-100px) rotate3d(0, 1, 0, -90deg);
transform-origin: 0 0;
}
}
@keyframes openright {
0% {
transform: none;
}
100% {
transform: translateZ(-100px) rotate3d(0, 1, 0, 90deg);
transform-origin: 100% 50%;
}
}
@keyframes openfront {
0% {
transform: none;
}
100% {
transform: translateZ(100px);
}
}
@keyframes openback {
0% {
transform: none;
}
100% {
transform: translateZ(-100px);
}
}
@keyframes animation {
0% {
transform: rotate3d(0, 0, 0);
}
100% {
/*transform: rotate3d(0,0,0,90deg);*/
transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
}
}
</style>
</head>
<body>
<div class="hexahedron">
<div class="all">
<div class="top">top</div>
<div class="bottom">bottom</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="front">front</div>
<div class="back">back</div>
</div>
</div>
</body>
</html>
时间： 2024-10-23 13:21:28