transform property Archives

CSS transform property

The CSS transform property relates a 2D or 3D transformation to an HTML element.

Syntax:

transform: none|transform-functions;

The CSS transform property allows you to rotate, move, skew and scale elements:

<!DOCTYPE html>
<html>
<head>
<style> 
.transform-property {
 display: flex;
 font-weight: bold;
    }
.rotate, .skew, .scale {
  width: 100px;
  height: 100px;
  background-color: #2a9d8f;
  margin:30px;  
}

.rotate{
  transform: rotate(30deg);
}

.skew {
  transform: skew(10deg,20deg);     
    }
.scale {
   transform: scale(1.5,1.5);
    }
</style>
</head>
<body>
<div class="transform-property">
<div class="rotate">Rotate</div>
<div class="skew">Skew</div>
<div class="scale">Scale</div>
</div>
    
</body>
</html>

Output:

Rotate

Skew

Scale

CSS transform-origin property

Hover over the squares to see the effect:

20% 40%

Center

Top right

The CSS transform-origin property sets the position of transformed elements.

Syntax:

transform-origin: x-axis y-axis z-axis;

2D transformations can change the x-axis and y-axis of an element.

3D transformations can change the x-axis, y-axis, and z-axis of an element.

x-axis (values: left, center, right, length, %) – specifies where the view is placed at the x-axis.

y-axis (values: top, center, bottom, length, %) – specifies where the view is placed at the y-axis.

z-axis (values: length) – specifies where the view is placed at the z-axis.

Note: The default value of the transform-origin property is 50% 50% 0.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#square-1 {
  position: relative;
  height: 100px;
  width:  100px;
  margin: 100px;
  padding: 10px;
  border: 1px solid black;
}

#square-2 {
  width:100px;
  height:100px;
  position: absolute;
  background-color: #2a9d8f;
  transform: rotate(45deg);
  transform-origin: 10% 60%;
}
</style>
</head>
<body>

<div id="square-1">
  <div id="square-2"></div>
</div>

</body>
</html>

Output:

CSS transform-style property

The CSS transform-style property defines how nested elements are rendered in 3D space.

Syntax:

transform-style: flat|preserve-3d;

flat (default) – defines those child elements that will not preserve their 3D position.

preserve-3d – defines those child elements that will preserve their 3D position.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.transform-style-example {
        display: flex;
    }

.planet, .planet-transform-style {
        width:100px;
        height:100px;
        border-radius:50%;
        position: relative;
        background-color: #2a9d8f;
        margin: 30px;
    }
.ring, .ring-transform-style {
        position: absolute;
        width:120px;
        height:50px;
        top:25px;
        left:-15px;
        border: 5px solid #264653;
        border-radius:50%;
        transform: rotateX(45deg);
    }
.planet-transform-style {
        transform-style: preserve-3d;
    }
</style>
</head>
<body>
<div class="transform-style-example">
<div class="planet">
    <div class="ring"></div>
    </div>
    
<div class="planet-transform-style">
    <div class="ring-transform-style"></div>
    </div>
    </div>
</body>
</html>

Output:

The default position is on the left. Elements preserve their 3D position on the right:

Enjoy coding!