CODEWITHSUNDEEP
htmlcsscss-transforms
Eva
Eva

Reputation: 294

Why z-axis doesn't work in transform-origin property?

As I think, the point, which x-axis coordinate is 100% and y-axis coordinate is 0 should move along z-axis by 60px. Why didn't it happen?

So, this is my code. Thank you in advance.

.block {
  margin: 50px;
  display: inline-block;
  width: 200px;
  height: 200px;
  background: pink;
  outline: 1px solid black;
  transform-origin: 100% 0 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.block:hover {
  transform: rotate(15deg);
}
<div class="block">Hello!</div>

Upvotes: 1

Views: 305

Answers (2)

Temani Afif
Temani Afif

Reputation: 272965

You will see no effect without perspective.

Below an example with and without persepctive to see the difference:

.block {
  margin: 20px;
  display: inline-flex;
  width: 100px;
  height: 100px;
  background: pink;
  outline: 1px solid black;
  transform-origin: 100% 0 60px;
  justify-content: center;
  align-items: center;
}

.block:hover {
  transform:perspective(var(--p,0px)) rotate(15deg);
}
<div class="block">Hello!</div>

<div class="block" style="--p:100px">Hello!</div>

And if your remove the z-axis value the perspective will also have no effect:

.block {
  margin: 20px;
  display: inline-flex;
  width: 100px;
  height: 100px;
  background: pink;
  outline: 1px solid black;
  transform-origin: 100% 0 0;
  justify-content: center;
  align-items: center;
}

.block:hover {
  transform:perspective(var(--p,0px)) rotate(15deg);
}
<div class="block">Hello!</div>

<div class="block" style="--p:100px">Hello!</div>

specifies a perspective projection matrix. This matrix scales points in X and Y based on their Z value, scaling points with positive Z values away from the origin, and those with negative Z values towards the origin. Points on the z=0 plane are unchanged. The parameter represents the distance of the z=0 plane from the viewer. Lower values give a more flattened pyramid and therefore a more pronounced perspective effect. ref

From the above, you can consider the use of perspective and the z-axis of transform-origin to simulate translateZ()

.block {
  margin: 20px;
  display: inline-flex;
  width: 100px;
  height: 100px;
  background: pink;
  outline: 1px solid black;
  justify-content: center;
  align-items: center;
}
<div style="display:inline-block;perspective:200px;">
<div class="block" style="
  transform:translateZ(-50px);
">Hello!</div>
</div>


<div class="block" style="
  transform-origin: 50% 50% 50px;
  transform:perspective(200px);
">Hello!</div>

Upvotes: 2

soufiane_ben_yaala
soufiane_ben_yaala

Reputation: 86

The transform-origin property allows you to change the position of transformed elements.

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

Upvotes: -1

Related Questions