Heim > Artikel > Web-Frontend > 旋转六面体源码_html/css_WEB-ITnose
旋转六面体源码_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:36:311242Durchsuche
应网友要求，也方便大家一起学习，在此贴出昨天编写旋转六面体源码
<!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>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：随便写写，当作了解Css_html/css_WEB-ITnoseNächster Artikel：CSS3 圆角（border-radius）详解_html/css_WEB-ITnose