Maison > Article > interface Web > 旋转六面体源码_html/css_WEB-ITnose
旋转六面体源码_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 11:36:311199parcourir
应网友要求，也方便大家一起学习，在此贴出昨天编写旋转六面体源码
<!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>
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：随便写写，当作了解Css_html/css_WEB-ITnoseArticle suivant：CSS3 圆角（border-radius）详解_html/css_WEB-ITnose