How to manage the div visibility during 3d transform?

Last Updated : 03 Feb, 2023

In this article, you will learn how to control the visibility of HTML divs when applying the CSS 3D transform property.

CSS allows you to perform 3D transforms on elements using CSS transform properties. There are two methods to define a transform in CSS.

1. transform: This property allows you to define the transformation of the element in 2D and 3D. Various transform values can be used to create a transforming effect on an element using this property. The following values can be applied to the CSS transform property to create a 3D transformation.

transform:rotate3d(X, Y, Z,Angle): It defines a 3D rotation along all three axes.
transform:rotateX(Angle): It defines a 3D rotation along the X-axis.
transform:rotateY(Angle): It defines a 3D rotation along the Y-axis.
transform:rotateZ(Angle): It defines a 3D rotation along the Z-axis.
transform:translate3d(X,Y,Z): It defines 3D translation.
transform:translateX(X): It define 3D translation using X-axis values only.
transform:translateY(Y): It define 3D translation using Y-axis values only.
transform:translateZ(Z): It define 3D translation using Z-axis values only.
transform:scale3d(X,Y,Z): It defines 3D scale transformation
transform:scaleX(X): It defines a 3D scale transformation given the X-axis value.
transform:scaleY(Y): It defines a 3D scale transformation given the Y-axis value.
transform:scaleZ(Z): It defines a 3D scale transformation given the Z-axis value.
transform:perspective(s): It defines the perspective view of the 3D transform element.

2. transform-origin: This method allows you to define the origin of the transformation. By default, the origin is the center only. The transform-origin is the point to which the transform is applied. For example, the transform-origin for the rotate() function is the center of rotation.

Syntax:

transform-origin:[center/right/left/top/bottom/length-percentage];

CSS backface-visibility property allows us to manage the visibility of elements during 3d transformation. This property sets the visibility of the mirror image or back side of an element during the 3d transformation. For example, In 3d rotation of an element the back side of the element should be visible to the viewer or not can be handled by this property.

Syntax:

backface-visibility: visible|hidden|initial|inherit;

Values:

visible: The back side of the element will be visible to the viewer during the 3d transformation.
hidden: The back side of the element will not be visible to the viewer during the 3d transformation.
initial: It set the default value. The default value is visible.
inherit: It inherits the value from the parent element.

Example 1: In the below example, we have created an <img> element, <button> element, to which CSS is applied. When the user clicks on the button, the transform:rotateY(180deg) property will be applied to the image element. Initially, the ‘backface-visibility’ is set to ‘visible‘. So the backside of the image will be visible to the viewer during the defined transformation.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
        content="IE=edge"> 
    <meta name="viewport" content= 
"width=device-width, initial-scale=1.0"> 
    <style> 
        body{ 
            text-align: center; 
        } 
        img{ 
            border: 2px solid green; 
        } 
        button{ 
            border: 2px solid rgba(0, 0, 0, 0.297); 
            padding: 0.7rem 2rem; 
            border-radius: 0.5rem; 
            cursor: pointer; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <h3>How to manage the div visibility during 3d transform?</h3> 
    <img id='image' src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20230201193809/geeksforgeeks.jfif" 
        alt="GeeksforGeeks" width="300" height="auto"><br><br> 
    <button onclick="changeBackface()"> 
        Change backface-visibility 
    </button> 
    <script> 
        changeBackface = () => { 
            document.getElementById('image').style.cssText =  
'transform:rotateY(180deg); backface-visibility: visible; transition: 2s;'; 
        } 
    </script> 
</body> 
</html>

Output:

Example 2: In the below example, we have set the ‘backface-visibility‘ to ‘hidden‘. When the user clicks on the button, the transformation will be performed but the back side of the image will not be visible.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
        content="IE=edge"> 
    <meta name="viewport" content= 
"width=device-width, initial-scale=1.0"> 
    <style> 
        body{ 
            text-align: center; 
        } 
        img{ 
            border: 2px solid green; 
        } 
        button{ 
            border: 2px solid rgba(0, 0, 0, 0.297); 
            padding: 0.7rem 2rem; 
            border-radius: 0.5rem; 
            cursor: pointer; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <h3>How to manage the div visibility during 3d transform?</h3> 
    <img id='image' src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20230201193809/geeksforgeeks.jfif" 
        alt="GeeksforGeeks" width="300" height="auto"><br><br> 
    <button onclick="changeBackface()"> 
        Change backface-visibility 
    </button> 
  
    <script> 
        changeBackface = () => { 
            document.getElementById('image').style.cssText =  
'transform:rotateY(180deg); backface-visibility: hidden; transition: 2s;'; 
        } 
    </script> 
</body> 
  
</html>