CSS - 3d transform

Ethan D. -

Basic 3d transforms

CSS 3d transforms let you move, scale, rotate, and skew elements in a three-dimensional space. Here are the basic 3d transforms:

Translate3d

The translate3d transform moves an element in the 3d space. It takes three values for the x, y, and z axes. For example:

Translate3d example

transform: translate3d(50px, 100px, 150px);

moves the element 50px to the right, 100px down, and 150px closer to the viewer.

Scale3d

The scale3d transform resizes an element in the 3d space. It takes three values for the x, y, and z axes. For instance:

Scale3d example

transform: scale3d(2, 1.5, 0.5);

doubles the element's width, increases its height by 50%, and halves its depth.

Rotate3d

The rotate3d transform rotates an element around a 3d axis. It takes four values: the rotation angle and the x, y, and z components of the rotation axis. For example:

Rotate3d example

transform: rotate3d(1, 1, 0, 45deg);

rotates the element 45 degrees around an axis that goes through the center of the element and points equally along the x and y axes.

Matrix3d

The matrix3d transform is the most complex and powerful 3d transform. It lets you combine multiple 3d transforms into a single transformation matrix. It takes 16 values that define a 4x4 3d transformation matrix. For instance:

Matrix3d example

transform: matrix3d(
  0.8535534, 0.3535534, 0.3826834, 0,
  -0.3535534, 0.8535534, 0.3826834, 0,
  -0.3826834, -0.3826834, 0.8408080, 0,
  100, 50, 0, 1
);

This matrix3d transform combines a rotation, a translation, and a scaling in the 3d space.

These basic 3d transforms give you power to create 3d effects in your web pages. In the next sections, we'll look at more advanced 3d transform properties and how to create 3d objects and animations with them.

3D Transform Properties

To create 3D effects, you need to use some extra CSS properties along with the basic 3D transforms. These properties control how the 3D scene is viewed and how the elements behave in it.

Perspective

The perspective property sets the distance between the viewer and the 3D scene. It affects how the 3D elements are seen. A small value makes the 3D effect more visible, while a large value makes it less visible.

Example: Perspective Property

perspective: 500px;

sets the view distance to 500 pixels.

Perspective-Origin

The perspective-origin property sets the position of the viewer in the 3D scene. It takes two values for the x and y coordinates. The default is center.

Example: Perspective-Origin Property

perspective-origin: left top;

puts the viewer to the top-left corner of the scene.

Transform-Style

The transform-style property sets whether the children of an element are in the same 3D scene or each have their own. It can be flat (default) or preserve-3d.

Example: Transform-Style Property

transform-style: preserve-3d;

puts the child elements in the same 3D space as the parent.

Backface-Visibility

The backface-visibility property sets whether the back face of an element is visible when it's rotated. It can be visible (default) or hidden.

Example: Backface-Visibility Property

backface-visibility: hidden;

hides the back face of the element when it's flipped.

These properties give you more control over the 3D scene and let you make 3D objects and animations. In the next section, we'll see how to use them to create various 3D shapes and effects.

Creating 3D Objects

CSS 3D transforms let you make 3D objects and shapes by transforming and combining 2D elements. Here's how to create some common 3D objects:

3D Boxes

To create a 3D box, you need six faces: front, back, top, bottom, left, and right. You can make them with six nested div elements and position them with 3D transforms.

Example: 3D Box HTML

<div class="box">
  <div class="front">Front</div>
  <div class="back">Back</div>
  <div class="top">Top</div>
  <div class="bottom">Bottom</div>
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

Example: 3D Box CSS

.box {
  transform-style: preserve-3d;
  transform: rotateX(-15deg) rotateY(30deg);
}

.box div {
  position: absolute;
  width: 200px;
  height: 200px;
  opacity: 0.8;
}

.front {
  transform: translateZ(100px);
  background: red;
}

.back {
  transform: translateZ(-100px) rotateY(180deg);
  background: blue;
}

.top {
  transform: translateY(-100px) rotateX(90deg);
  background: green;
}

.bottom {
  transform: translateY(100px) rotateX(-90deg);
  background: yellow;  
}

.left {
  transform: translateX(-100px) rotateY(-90deg);
  background: orange;
}

.right {
  transform: translateX(100px) rotateY(90deg);
  background: purple;
}

This code makes a 3D box with colored faces that you can rotate with the rotateX and rotateY transforms on the container.

3D Text

You can also use 3D transforms on text elements to give them depth and perspective.

Example: 3D Text HTML

<h1 class="text-3d">
  3D Text
</h1>

Example: 3D Text CSS

.text-3d {
  font-size: 5rem;
  color: white;
  text-shadow: 
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    0 0 10px #fff,
    0 0 20px #fff,
    0 0 30px #fff,
    0 0 40px #ff00de,
    0 0 70px #ff00de,
    0 0 80px #ff00de,
    0 0 100px #ff00de,
    0 0 150px #ff00de;
  transform: perspective(400px) rotateX(33deg) scale(1.2);
}

This code uses the text-shadow property to add multiple glowing shadows to the text and the perspective and rotateX transforms to give it a 3D appearance.

3D Shapes

Besides boxes, you can create various 3D shapes like pyramids, prisms, cylinders, and more by transforming and combining 2D elements. For instance, here's a 3D pyramid:

Example: 3D Pyramid HTML

<div class="pyramid">
  <div class="base"></div>
  <div class="face front"></div>
  <div class="face back"></div>
  <div class="face left"></div>
  <div class="face right"></div>
</div>

Example: 3D Pyramid CSS

.pyramid {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  animation: spin 5s linear infinite;
}

@keyframes spin {
  from { transform: rotateY(0); }
  to { transform: rotateY(360deg); }
}

.base {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: translateY(73px) rotateX(90deg);
  background: rgba(0, 0, 0, 0.8);
}

.face {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 100px 200px 100px;
  transform-origin: 50% 0;
  opacity: 0.8;
}

.front {
  border-color: transparent transparent red transparent;
  transform: rotateY(0deg) rotateX(30deg);  
}

.back {
  border-color: transparent transparent blue transparent;
  transform: rotateY(180deg) rotateX(30deg);
}

.left {
  border-color: transparent transparent green transparent;
  transform: rotateY(270deg) rotateX(30deg);
}

.right {
  border-color: transparent transparent yellow transparent;
  transform: rotateY(90deg) rotateX(30deg);
}

This code creates a 3D pyramid with a square base and four triangular faces. It uses CSS border tricks to make the triangles and 3D transforms to position and rotate them. An animation makes the pyramid spin.

Combining 3D Transforms

You can create complex 3D objects and scenes by combining multiple 3D transforms on nested elements. For example, you can make a 3D solar system with orbiting planets:

Example: 3D Solar System HTML

<div class="universe">
  <div class="sun"></div>
  <div class="orbit orbit-1">
    <div class="planet planet-1"></div>
  </div>
  <div class="orbit orbit-2">
    <div class="planet planet-2"></div>
  </div>
  <div class="orbit orbit-3">
    <div class="planet planet-3"></div>
  </div>
</div>

Example: 3D Solar System CSS

.universe {
  transform-style: preserve-3d;
  transform: rotateX(75deg);
}

.sun {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: yellow;
  transform: translate(-50%, -50%);
}

.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  transform-style: preserve-3d;
  animation: orbit 10s linear infinite;
}

.orbit-1 {
  width: 300px;
  height: 300px;
}

.orbit-2 {
  width: 500px;
  height: 500px;
  animation-duration: 25s;
}

.orbit-3 {
  width: 700px;
  height: 700px;
  animation-duration: 40s;
}

@keyframes orbit {
  from { transform: rotateZ(0); }
  to { transform: rotateZ(360deg); }
}

.planet {
  position: absolute;
  top: 50%;
  left: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transform-style: preserve-3d;
  animation: planet 5s linear infinite;
}

@keyframes planet {
  from { transform: rotateY(0) rotateX(90deg) rotateZ(0); }
  to { transform: rotateY(360deg) rotateX(90deg) rotateZ(0); }
}

.planet-1 {
  background: red;
}

.planet-2 {
  background: blue;
  animation-duration: 10s;
}

.planet-3 {
  background: green;
  animation-duration: 15s;
}

This code uses nested div elements to create a sun, orbits, and planets. The orbits and planets are positioned with top and left and transformed with rotateX, rotateY, and rotateZ to create a 3D solar system. Animations make the orbits and planets rotate at different speeds.

As you can see, by combining 3D transforms creatively, you can build impressive 3D objects and scenes with CSS. The possibilities are endless.

3D Transform Examples

CSS 3D transforms open up possibilities for making 3D effects. Let's look at some examples of 3D transforms in action.

3D Cube

A 3D cube is an example of using 3D transforms. It involves making six faces of a cube and putting them in 3D space.

Example: Basic 3D Cube

<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>
.cube {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  animation: rotate 5s infinite linear;
}

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  text-align: center;
  line-height: 200px;
  font-size: 24px;
}

.front {
  transform: translateZ(100px);
}

.back {
  transform: translateZ(-100px) rotateY(180deg);
}

.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(0deg) rotateY(0deg); }
  to { transform: rotateX(360deg) rotateY(360deg); }
}

This code makes a 3D cube with six faces, each changed and placed to form a cube shape. An animation rotates the cube infinitely.

3D Flip Card

A 3D flip card is an effect where a card flips over to show its back face when hovered. It's used for product showcases, user profiles, and more.

Example: Basic 3D Flip Card

<div class="card">
  <div class="front">
    <img src="front.jpg" alt="Front">
  </div>
  <div class="back">
    <h2>Card Title</h2>
    <p>Card description goes here.</p>
  </div>
</div>
.card {
  position: relative;
  width: 300px;
  height: 400px;
  perspective: 1000px;
  cursor: pointer;
}

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: transform 0.6s;
}

.front {
  background: #eee;
  transform: rotateY(0deg);
}

.back {
  background: #f9f9f9;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
}

.card:hover .front {
  transform: rotateY(-180deg);
}

.card:hover .back {
  transform: rotateY(0deg);
}

.back h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

.back p {
  font-size: 16px;
}

This code makes a card with a front and a back face. The backface-visibility property hides the back face at first. When the card is hovered, the front face rotates 180 degrees to hide, and the back face rotates 0 degrees to show. A transition makes the flip smooth.

3D Parallax Effect

A 3D parallax effect makes an illusion of depth by making background layers move slower than foreground layers when scrolling or mousemove. It's used for storytelling, hero sections, and interactive backgrounds.

Example: Basic 3D Parallax Effect

<div class="parallax">
  <div class="layer background"></div>
  <div class="layer midground"></div>
  <div class="layer foreground"></div>
</div>
.parallax {
  position: relative;
  width: 100%;
  height: 400px;
  overflow-x: hidden;
  overflow-y: scroll;
  perspective: 8px;
  perspective-origin: 0;
}

.layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
}

.background {
  background-image: url(background.jpg);
  transform: translateZ(-5px) scale(1.625);
}

.midground {
  background-image: url(midground.png);
  transform: translateZ(-2px) scale(1.25);
}

.foreground {
  background-image: url(foreground.png);
  transform: translateZ(0) scale(1);
}

This code makes three layers with different background images and puts them at different depths using translateZ. A perspective value on the container makes the parallax effect when scrolling or mousemove. The scale values compensate for the depth and keep the layer sizes.

These are a few examples of the 3D effects you can make with CSS 3D transforms. By combining transforms, transitions, and animations, you can build immersive and interactive 3D experiences for your web pages.