JSFiddle - React, Tailwind, and code Playground

by nkovacs

HTML

<a href="#hilite1">1</a>
<a href="#hilite2">2</a>

<div class="container">
    <div class="cube hilite2">
        <div class="hilite" id="hilite1">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras gravida, est et egestas fermentum, urna neque varius eros, in dignissim purus nisl id orci. Mauris in erat massa. Vivamus tincidunt vehicula imperdiet. Nam lacinia posuere ipsum, at sagittis velit molestie nec. Donec ac est purus. Vestibulum fermentum, lorem porta blandit rhoncus, diam massa mattis nisl, non dapibus leo odio at sapien. Sed urna nulla, placerat et commodo in, volutpat vitae lorem. Aenean luctus mollis leo, at varius ipsum convallis sed. Curabitur diam orci, commodo vitae feugiat et, blandit non nibh. Morbi euismod libero et quam tempor interdum. Vivamus nulla nulla, dictum eu egestas at, consectetur eu lectus.
        </div>
        <div class="hilite" id="hilite2">
            Phasellus eros metus, aliquam quis congue ultrices, ultrices quis leo. Aliquam erat volutpat. Sed eget arcu eget risus sodales cursus quis in massa. Morbi eget nunc diam, fringilla commodo tellus. Curabitur vitae nisi non turpis blandit ornare. Cras nec diam turpis, at hendrerit ipsum. Aenean aliquet, massa vel porta feugiat, magna diam sodales augue, non rutrum odio mauris sit amet lorem. In convallis placerat lacus id vehicula. Ut fermentum placerat nibh ut egestas. Aliquam in ligula non orci vulputate eleifend in sed massa. Donec interdum, velit nec venenatis dapibus, odio massa vestibulum lorem, sed sodales eros velit id arcu.
        </div>
    </div>
</div>

CSS

.container {
  position: relative;
  -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -o-perspective: 1000px;
    perspective: 1000px;
    width:500px;
    height:200px;
}    

.cube {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: absolute;
    width:100%;
    height:100%;
    
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;
}

.cube.hilite1 {
    -webkit-transform: translateZ( -100px );
    -moz-transform: translateZ( -100px );
    -o-transform: translateZ( -100px );
    transform: translateZ( -100px );
}

.cube.hilite2 {
    -webkit-transform: translateZ( -100px ) rotateX(   90deg );
    -moz-transform: translateZ( -100px ) rotateX(   90deg );
    -o-transform: translateZ( -100px ) rotateX(   90deg );
    transform: translateZ( -100px ) rotateX(   90deg );
}

.hilite {
    position: absolute;
    background: #92132b;
    width:100%;
    height:100%;
    overflow:hidden;
}

#hilite1 {
    -webkit-transform: translateZ( 100px );
    -moz-transform: translateZ( 100px );
    -o-transform: translateZ( 100px );
    transform: translateZ( 100px );
}

#hilite2 {
    -webkit-transform: rotateX(  -90deg ) translateZ( 100px );
    -moz-transform: rotateX(  -90deg ) translateZ( 100px );
    -o-transform: rotateX(  -90deg ) translateZ( 100px );
    transform: rotateX(  -90deg ) translateZ( 100px );
}

.hiasdfasflite {
    background: #92132b;
    padding: 1em;
    
    transition: transform 2s ease-in-out;
    -moz-transition: -moz-transform 2s ease-in-out; /* Firefox 4 */
    -webkit-transition: -webkit-transform 2s ease-in-out; /* Safari and Chrome */
    -o-transition: -o-transform 2s ease-in-out; /* Opera */
    
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
   ...