Skip to content

# 3D experiments

Extra CSS 3D experiments and ideas. Bent panel, rotating text, card reveal, folding card, stacked layers.

Home · rskworld.in · 2026

## Bent Panel

Panel with 3D bend on hover.

Output

Hover me

Code

HTML

    <div class="bent-panel-scene">
      <div class="bent-panel"><span>Hover me</span></div>
    </div>

## Rotating 3D Text

Text with continuous 3D rotation.

Output

CSS 3D

Code

HTML

    <div class="rotate-text-scene">
      <div class="rotate-text">CSS 3D</div>
    </div>

## Card Reveal

Hover to reveal back.

Output

?
A
?
B
?
C

Code

HTML

    <div class="reveal-cards">
      <div class="reveal-card">
        <div class="reveal-inner">
          <div class="reveal-front">?</div>
          <div class="reveal-back">A</div>
        </div>
      </div>
      <!-- repeat for B, C -->
    </div>

## Folding Card

Hover to fold in 3D.

Output

L
R

Code

HTML

    <div class="fold-scene">
      <div class="fold-card">
        <div class="fold-left">L</div>
        <div class="fold-right">R</div>
      </div>
    </div>

## Stacked 3D Layers

Layers with translateZ.

Output

1
2
3

Code

HTML

    <div class="stacked-scene">
      <div class="stacked-layer stacked-back">1</div>
      <div class="stacked-layer stacked-mid">2</div>
      <div class="stacked-layer stacked-front">3</div>
    </div>

### Customize

Accent color
Animation speed1x
Border radius10px
Theme