css
  1. css-transform-style
PreviousNext

CSS Transform Style

  • The transform-style property in CSS is used to define the transformation space for nested elements.
  • It specifies whether an element's children are positioned in the 3D space or flattened onto the 2D plane of the element.

Syntax

transform-style: flat|preserve-3d|initial|inherit;

Possible values include:

  • flat: This is the default value and indicates that all child elements are positioned on the 2D plane of the parent element.
  • preserve-3d: This value indicates that child elements maintain their 3D position relative to the parent element. This creates a 3D transformation space for the child elements.
  • initial: This sets the property to its default value.
  • inherit: This inherits the property from its parent element.

Example

<style>
    .parent {
        transform-style: preserve-3d;
    }
    .child {
        transform: rotateY(45deg);
    }
</style>

<div class="parent">
    <div class="child">
        This element is transformed in 3D space.
    </div>
</div>
Try Playground

Explanation

In this example, the transform-style property is applied to the parent element with the value of preserve-3d. This indicates that child elements of the parent element will maintain their 3D position relative to the parent element. The child element in this example has a transform property applied to it that rotates it 45 degrees on the Y-axis. This only affects the child element, while the parent remains in its original position.

Use

The transform-style property is useful when working with 3D transformations and animations. It allows you to position child elements in a 3D space relative to their parent element, creating an immersive and dynamic web experience.

Important Points

  • The preserve-3d value of the transform-style property is often used in combination with other 3D transformation properties, such as rotateX, rotateY, rotateZ, translateX, translateY, and translateZ.
  • The default value of the transform-style property is flat, which indicates that all child elements are positioned on the 2D plane of their parent.
  • When working with preserve-3d, it's important to note that child elements may not behave as expected in older browsers that don't support 3D transforms.

Summary

The transform-style property in CSS allows you to specify whether child elements should maintain their 3D position or be flattened onto the 2D plane of their parent. By default, all child elements are positioned on the 2D plane, but with the preserve-3d value, you can create a 3D transformation space for child elements relative to their parent element. This is a useful property when working with 3D transformations and can add an extra layer of interactivity to your web designs.

QuotesUnicode Bidi
Published on: