basically, there are ten different elements, rotated different amounts using rotateX and translateZ to approximately form a cylinder. then there's a parent element that's animated to spin by changing rotateX
thanks to @bethposting for the suggestion to use this for a slot machine
🍒
🍉
💎
🪙
🍎
🔔
🍇
🍊
🌟
There's also an overlay with a partially transparent linear gradient over each spinning cylinder (the overlay is rendered on top because it has a higher z-index)
HTML below
<div style="transform-style: preserve-3d;transform:rotateX(7deg) rotateY(5deg);height:110px;width:300px;perspective:10000px;">
<div style="text-align:center;font-size:5em;position:relative;height:110px;width:300px;animation: 4s linear 0s infinite spin;transform-style: preserve-3d;transform-origin:center center 0;transform:rotateX(359deg);animation-fill-mode:both;'">
<div style="transform:rotateX(324deg) translateZ(185px);position:absolute;top:0;left:0;background:rgba(255, 255, 255, 0.5);width:100px;transform-origin:center center 0;">🍒</div>
<div style="transform:rotateX(288deg) translateZ(185px);position:absolute;top:0;left:0;background:rgba(255, 255, 255, 0.5);width:100px;transform-origin:center center 0;">🍉</div>
<div style="transform:rotateX(252deg) translateZ(185px);position:absolute;top:0;left:0;background:rgba(255, 255, 255, 0.5);width:100px;transform-origin:center center 0;">💎</div>
<div style="transform:rotateX(216deg) translateZ(185px);position:absolute;top:0;left:0;background:rgba(255, 255, 255, 0.5);width:100px;transform-origin:center center 0;">🪙</div>
<div style="transform:rotateX(180deg) translateZ(185px);position:absolute;top:0;left:0;background:rgba(255, 255, 255, 0.5);width:100px;transform-origin:center center 0;">🍎</div>
<div style="transform:rotateX(144deg) translateZ(185px);position:absolute;top:0;left:0;background:rgba(255, 255, 255, 0.5);width:100px;transform-origin:center center 0;">🔔</div>
<div style="transform:rotateX(108deg) translateZ(185px);position:absolute;top:0;left:0;background:rgba(255, 255, 255, 0.5);width:100px;transform-origin:center center 0;">🍇</div>
<div style="transform:rotateX(72deg) translateZ(185px);position:absolute;top:0;left:0;background:rgba(255, 255, 255, 0.5);width:100px;transform-origin:center center 0;">🍊</div>
<div style="transform:rotateX(36deg) translateZ(185px);position:absolute;top:0;left:0;background:rgba(255, 255, 255, 0.5);width:100px;transform-origin:center center 0;">🌟</div>
<div style="transform:rotateX(0deg) translateZ(185px);position:absolute;top:0;left:0;background:rgba(255, 255, 255, 0.5);width:100px;transform-origin:center center 0;"></div>
</div>
</div>
</div>
Overlay
<div style="height:100px;width:100px;position:relative;font-size:3em;text-align:center;"><div style="position:absolute;top:0;left:0;height:100px;width:100px;z-index:1000;background: linear-gradient(0deg, rgba(194,194,194,0.4) 0%, rgba(250,250,250,0.4) 25%, rgba(250,250,250,0.4) 75%, rgba(194,194,194,0.4) 100%);transform:translateZ(200px);border-radius:0.2em;"></div></div>
