ホームページ >ウェブフロントエンド >htmlチュートリアル >回転六面体のソースコード_html/css_WEB-ITnose
回転六面体のソースコード_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:36:311278ブラウズ
ネチズンのリクエストに応えて、皆さんが一緒に学びやすくするために、昨日回転する六面体を書くためのソースコードをここに示します
<!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>
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。