您的位置：首页 > 其它

旋转六面体源码

2015-09-21 20:25 399 查看

应网友要求，也方便大家一起学习，在此贴出昨天编写旋转六面体源码

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航