前回つくったもの を3D的な感じにしてみました。
CSSアニメーションを一時停止する - みかづきブログ その3
HTML
<div id="plate"> <div class="front">HELLO</div> <div class="back">WORLD.</div> </div>
CSS
body { background: #e3e3e3; } #plate { position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; width: 300px; height: 300px; font: 35px AvenirNext-Heavy; line-height: 300px; text-align: center; cursor: pointer; transition: opacity .1s ease-in-out; -webkit-animation: rotate 5s ease-in-out infinite alternate; animation: rotate 5s ease-in-out 2 alternate; transform-style: preserve-3d; transform: rotateX(20deg) rotateY(30deg); .front { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(200, 200, 200, .95); } &:after { // right display: block; position: absolute; top: 0; right: 0; width: 25px; height: 100%; content: ""; background: rgba(200, 200, 200, .95); transform-origin: right center; transform: rotateY(-90deg); } .back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(200, 200, 200, .95); transform-origin: center center; transform: translateZ(-25px) rotateY(180deg); } &:before { // left display: block; position: absolute; top: 0; left: 0; width: 25px; height: 100%; content: ""; background: rgba(200, 200, 200, .95); transform-origin: left center; transform: rotateY(90deg); } &.pause { opacity: .9; -webkit-animation-play-state: paused; animation-play-state: paused; } } @keyframes rotate { 0% { transform: rotateX(0deg) rotateY(0deg) scale(1); } 10% { transform: rotateX(0deg) rotateY(0deg) scale(1); } 20% { transform: rotateX(20deg) rotateY(0deg) scale(0.8); } 80% { transform: rotateX(-20deg) rotateY(180deg) scale(0.8); } 90% { transform: rotateX(0deg) rotateY(180deg) scale(1); } 100% { transform: rotateX(0deg) rotateY(180deg) scale(1); } }
JavaScript
(function(win, doc) { "use strict"; doc.querySelector("#plate").addEventListener("click", function() { this.classList.toggle("pause"); }, false); })(this, document);
全然印象が違いますね。