JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<section class=widthtTwentyFivePercent>
       <div id="carousel-3d">
<div id="carousel" class="spinner5">
    <article class="siteHolder">discover </article>
    <article class="siteHolder">GENERAL NEWS!</article>
    <article class="siteHolder">3</article>
    <article class="siteHolder">4</article>
    <article class="siteHolder">5</article>
    <article class="siteHolder">
    this a the 3D wordpress theme you ve been waiting for.
    </article>
    <article class="siteHolder">7</article>
    <article class="siteHolder">8</article>
    <article class="siteHolder">
    <section class="phoneBox">
      
      
    <div class="hexagon">
    <div class="hex-in">
        <div class="hex-sub"></div>
    </div>
    </div>
    
      <p>Thanks for trying k-land System beta!</p>
    </section>
    </article>
</div>
</div> 
</section>

CSS

#carousel-3d {
    width: 960px;
    height: 640px;
    position:relative;
    top:50%;
    left:50%;
    margin:-320px 0 0 -380px;
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
-ms-perspective: 1200px;
-o-perspective: 1200px;
perspective: 1200px;
}

#carousel {
    width: 960px;
    height: 640px;
    margin: 0px 0 0 -242px;
    position: absolute;
    top:0;
    left: 0;
//-webkit-transform: rotateY(360deg) translateZ(-2584px);
-webkit-animation-name: spinner5;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 20s;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
-moz-animation-name: spinner5;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 20s;
-moz-transform-style: preserve-3d;
-moz-transform-origin: 50% 50%;
-ms-animation-name: spinner5;
-ms-animation-timing-function: ease-in-out;
-ms-animation-iteration-count: infinite;
-ms-animation-duration: 20s;
-ms-transform-style: preserve-3d;
-ms-transform-origin: 50% 50%;
-o-animation-name: spinner5;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 20s;
-o-transform-style: preserve-3d;
-o-transform-origin: 50% 50%;
animation-name: spinner5;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 20s;
transform-style: preserve-3d;
transform-origin: 50% 50%;
}
#carousel article {
position: absolute;
border: 4px solid #333;
    
    display: block;
    width: 960px;
    overflow:hidden;
    height: 640px;
    left: 10px;
    top: 10px;
    font-family: 'Righteous', cursive;
    line-height: 116px;
    font-size: 80px;
    font-weight: bold;
    color:#9C9A96;
    text-align: center;
    -khtml-box-shadow:inset 0px 0px 16px 10px rgba(0, 0, 0, 0.07), -23.18em 0.0499999em -1.53em 0 rgba(0, 0, 0, 0.08),-40em 0 rgba(0, 0, 0, 0.15),40em 0 rgba(0, 0, 0, 0.15),0 14px...