CSSでDOMに厚みがあるような雰囲気を醸し出す

前回つくったものを3D的な感じにしてみました。

DEMO

See the Pen plate that rotates by kimmy (@kimmy) on CodePen.

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);