Css Module 58

  Module 58 : CSS3D Transformations – Creating depth effects using 3D transformations.

1. Introduction to CSS3D Transformations

Definition:

CSS3D transformations allow you to rotate, scale, move, and skew elements in a three-dimensional space using CSS.

Why use 3D transforms?

To create visually engaging UI effects (like flip cards, rotating elements, etc.)

Enhance user interaction with depth perception

Improve storytelling through motion

2. Key Properties and Concepts

2.1 transform

Used to apply 2D or 3D transformation to an element.

Syntax:

css

 code

transform: rotateX(45deg) rotateY(20deg) translateZ(100px);

2.2 transform-style

Defines how nested elements are rendered in 3D.

css

 code

transform-style: preserve-3d;

2.3 perspective

Gives a sense of depth by defining how far the viewer is from the z-plane.

css

 code

perspective: 1000px;

2.4 perspective-origin

Sets the vanishing point of the 3D space.

css

 code

perspective-origin: center center;

2.5 backface-visibility

Controls whether the back of an element is visible when it is rotated.

css

 code

backface-visibility: hidden;

3. Example – Flip Card Effect

HTML:

html

 code

<div class="scene"> <div class="card"> <div class="card-face front">Front</div> <div class="card-face back">Back</div> </div> </div>

CSS:

css

code

.scene { width: 200px; height: 300px; perspective: 1000px; } .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 1s; } .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; font-size: 2rem; } .front { background: lightblue; } .back { background: tomato; transform: rotateY(180deg); } .scene:hover .card { transform: rotateY(180deg); }

Explanation:

The .scene acts as a container and sets the perspective.

.card rotates in 3D space on hover.

.front and .back are faces of the card that flip.

4. Exercise: 3D Rotating Cube

Goal: Create a 3D rotating cube using CSS.

HTML:

html

code

<div class="cube-container"> <div class="cube"> <div class="face front">Front</div> <div class="face back">Back</div> <div class="face right">Right</div> <div class="face left">Left</div> <div class="face top">Top</div> <div class="face bottom">Bottom</div> </div> </div>

CSS:

css

code

.cube-container { width: 200px; height: 200px; perspective: 800px; margin: 100px auto; } .cube { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transform: rotateX(-20deg) rotateY(20deg); animation: rotate 10s infinite linear; } .face { position: absolute; width: 200px; height: 200px; background: rgba(0, 128, 255, 0.6); border: 1px solid #000; display: flex; align-items: center; justify-content: center; } .front { transform: translateZ(100px); } .back { transform: rotateY(180deg) translateZ(100px); } .right { transform: rotateY(90deg) translateZ(100px); } .left { transform: rotateY(-90deg) translateZ(100px); } .top { transform: rotateX(90deg) translateZ(100px); } .bottom { transform: rotateX(-90deg) translateZ(100px); } @keyframes rotate { from { transform: rotateX(-20deg) rotateY(0deg); } to { transform: rotateX(-20deg) rotateY(360deg); } }

5. Activity

Task: Create a 3D image gallery

Display multiple images as panels arranged in a 3D carousel.

Use rotateY and translateZ to position them.

Rotate the carousel on button click.

6. Guidance

 1: Introduction to 3D Space

Explain axes (X, Y, Z)

Show how elements can be rotated and moved

 2: Understanding Perspective

Live coding: show difference between perspective: 200px vs 1000px

3: Flip Cards and Cube Project

 code along with flip card

Explain role of each CSS property

 4: Final Project

create their own interactive 3D interface (carousel, cards, etc.)

7. Questions

What does preserve-3d do?

How does perspective affect 3D transformations?

Explain the difference between translateZ() and rotateZ().

Create a 3D card that rotates on hover using rotateX().

8. Summary

CSS3D allows realistic depth and spatial interaction in UI.

Essential properties include transform, perspective, and backface-visibility.

With CSS only, you can create complex visual interfaces like flip cards, rotating cubes, and 3D galleries.