<div class="scene-wrapper">
<div class="cylinder-container">
<div class="cylinder">
<!-- 10 faces mapped mathematically in CSS -->
<div class="face" style="transform: rotateY(0deg) translateZ(160px);">CSS3</div>
<div class="face" style="transform: rotateY(36deg) translateZ(160px);">HTML5</div>
<div class="face" style="transform: rotateY(72deg) translateZ(160px);">REACT</div>
<div class="face" style="transform: rotateY(108deg) translateZ(160px);">NODE</div>
<div class="face" style="transform: rotateY(144deg) translateZ(160px);">SQL</div>
<div class="face" style="transform: rotateY(180deg) translateZ(160px);">VUE</div>
<div class="face" style="transform: rotateY(216deg) translateZ(160px);">NEXT</div>
<div class="face" style="transform: rotateY(252deg) translateZ(160px);">SWELTE</div>
<div class="face" style="transform: rotateY(288deg) translateZ(160px);">TYPESCRIPT</div>
<div class="face" style="transform: rotateY(324deg) translateZ(160px);">PYTHON</div>
</div>
</div>
</div>
Back to Snippets
3D Rotating Text Cylinder CSS
Create a highly advanced 3D rotating text marquee purely with CSS. We arranged layers in a perfect circle using transforms, which gives your typography incredible depth and movement.
73