Home >Web Front-end >HTML Tutorial >旋转六面体源码_html/css_WEB-ITnose
旋转六面体源码_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:36:311275browse
应网友要求，也方便大家一起学习，在此贴出昨天编写旋转六面体源码
<!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>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：随便写写，当作了解Css_html/css_WEB-ITnoseNext article：CSS3 圆角（border-radius）详解_html/css_WEB-ITnose