CSS Transforms

by Anton

HTML

<div id="container">
    <div class="obj">Original</div>
    <div class="obj transformed">Transformed</div>
    
    <div class="cube">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
        <div class="four">4</div>
    </div>
</div>

CSS

body { background-color: #444; }

#container {
    position: relative;
    width: 800px;
    height: 200px;
    border: solid 1px #000;
    
    perspective: 300px;
}

.obj {
    position: absolute;
    top: 140px;
    left: 100px;
    padding: 3px;
    height: 50px;
    width: 120px;
    color: #444;
    background-color: #fff;
    box-sizing: border-box;
}

.obj:not(.transformed) {
    opacity: 0.3;
}

.obj.transformed {
    transform-origin: top left;
    /* transform: rotate(-70deg); */
    /* transform: translate(200px, -60px); */
    /* transform: scale(0.75, 2); */
    transform: skew(0, 30deg);
}

.cube {
    position: absolute;
    top: 80px;
    left: 400px;
    
    transform-style: preserve-3d;
    
    transform: rotateX(30deg);
    /* transform: rotateY(-45deg); */
    
    animation-name: rotateY;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-delay: 0;
}

.cube > div {
    position: absolute;
    top: 0;
    left: 0;
    padding: 3px;
    height: 50px;
    width: 50px;
    color: #000;
    font-weight: bold;
    font-size: 32px;
    background-color: #fff;
    box-sizing: border-box;
    opacity: 0.5;
}

.one { transform: rotateX(-30deg) translate3d(0, 0, 25px); }
.two { transform: rotateX(-30deg) translate3d(25px, 0, 0) rotateY(90deg); }
.three { transform: rotateX(-30deg) translate3d(0, 0, -25px) rotateY(180deg); }
.four { transform: rotateX(-30deg) translate3d(-25px, 0, 0) rotateY(270deg); }


@keyframes rotateY {
    0% { transform: rotateY(0); }
    100% { transform: rotateY(360deg); }
}