Perspective and Translatez Moves Diagonally

perspective and translateZ moves diagonally

It's all a matter of perspective-origin that define how the changes should be visible to us.

If you read the same link you will notice this:

The vanishing point is by default placed at the center of the element, but its position can be changed using the perspective-origin property.

Here is some example where you can better understand:

.wrapper {  position: relative;  height: 100px;  width: 100px;  border: 1px solid;  perspective: 10px;  transform-style: preserve-3d;}
.cube {  width: 100%;  height: 100%;  background: red;  animation: change 2s linear infinite alternate;}
@keyframes change {  to {    transform: translateZ(-10px);  }}

moving from the center<div class="wrapper">  <div class="cube"></div></div>moving from the left<div class="wrapper" style="perspective-origin:left">  <div class="cube"></div></div>moving from a custom point<div class="wrapper" style="perspective-origin:20% 80%">  <div class="cube"></div></div>

Why CSS translateZ is ignored if parent element has a transform of its own?

From the specification:

By default, transformed elements do not create a 3D rendering context and create a flattened representation of their content. However, since it is useful to construct hierarchies of transformed objects that share a common 3-dimensional space, this flattening behavior may be overridden by specifying a value of preserve-3d for the transform-style property. This allows descendants of the transformed element to share the same 3D rendering context.

So simply add transform-style:preserve-3d to the subcontainer element and the perspective of the grand-parent will be respected:

.container{
  background: #f4f7be;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
}

.subcontainer{
  background: #baf7f6;
  width: 70%;
  height: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: scale(1.001);
  transform-style:preserve-3d;
}

.shape{
  background: #555;
  width: 40%;
  height: 50%;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  transform: translateZ(300px);
}

<html>
  <div class="container">
    <div class="subcontainer">
      <div class="shape"></div>
    </div>
  </div>
</html>

What is the formula for proportions of elements using perspective and translateZ?

Yes!

There's actually quite a simple formula for finding the offset - the 3d Projection article on Wikipedia has a diagram and the formula.

The formula is bx = ax * bz / az where:

ax is the original distance from the transform origin point
az is the perspective + the negative translateZ
bz is the perspective

and this will give you:

bx - the new distance from the transform origin point

So, you need to know:

bz : the perspective (eg: 1000px)
ax : the offset from the transform origin point, eg: if the origin point is 50% then this needs to be the element's top relative to the center of the parent element (parent.height/2 + element.top) -- let's say -500px
z : the element's translateZ (eg: -600px)
az is then bz + z * -1, in this case: 1000 + (-600 * -1) = 1600

so the formula is: -500 * 1000 / 1600 = -312.5

The element is offset vertically -312.5px from the origin, whereas originally it was offset -500px, the difference between the two number is what you'll need to add to the old top value to get the equivalent new value.

This formula also works for the Y axis.

I put together a quick example here: http://jsfiddle.net/trolleymusic/xYRgx/

Why perspective isn't giving the same result when some styles are updated?

Each have almost the same values, one perspective looks fine,

No they don't have the same values. One is using position:absolute and the the other one position:relative and this make a big difference. If you inspect the god element you will notice that its height is 0 when using the position:absolute (the first case) which is creating the issue.

Here is a simplified code to better show your issue:

.box {
  display: inline-block;
  vertical-align:top;
  width: 100px;
  perspective: 200px;
  position: relative;
  margin: 20px;
  background:blue;
}

.box>div {
  position: relative;
  padding: 10px;
  background: red;
  color: #fff;
  transition: 1s all linear;
  transform-origin: top left;
}

body:hover .box > div {
  transform: rotateY(-40deg);
}

<div class="box">
  <div>Some text here</div>
</div>
<div class="box">
  <div style="position:absolute;">Some text here</div>
</div>

Why changing the position changes the effect of 3D transform?

although both of them has the same perspective view why changing their position changed the effect of 3D transform ?

They have the same perspective, yes but the trick is in the perspective-origin which is set to be the center of the parent element (not the elements). Your Red element is already in center so it will only comes close to your while the yellow element isn't in the center so its movement will be different.

To better illustrate here is another example using a rotate transformation.

.container {
  border:2px solid red;
  perspective:300px;
  perspective-origin:50% 50%;
  padding:20px;
  display:flex;
  justify-content:space-around;
}

.container > div {
  width:50px;
  height:50px;
  background:blue;
  transform:rotateY(20deg);
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="container" style="perspective-origin:10% 50%">
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="container" style="perspective-origin:70% 50%">
  <div></div>
  <div></div>
  <div></div>
</div>

animation with rotateY looks the same in different value

You need to add some perspective to get what you want:

const rotate1 = [  {    transform: `rotateX(0)`  },  {    transform: `rotateY(45deg)`  },  {    transform: `rotateX(0)`  }];
const rotate2 = [  {    transform: `rotateY(0)`  },  {    transform: `rotateY(-45deg)`  },  {    transform: `rotateY(0)`  }];
document.getElementById('rotated1').onclick = function(){this.animate(rotate1,1000)}document.getElementById('rotated2').onclick = function(){this.animate(rotate2,1000)}
document.getElementById('rotated1').animate(rotate1,1000)document.getElementById('rotated2').animate(rotate2,1000)

div {  width: 150px;  height: 150px;  margin:5px;}
#rotated1 {  background-color: pink;}
#rotated2 {  background-color: green;}
body {  perspective:200px;  perspective-origin:left center;  margin:0;  min-height:100vh;}

<div id="rotated1">click me</div>
<div id="rotated2">click me</div>

IcCube - Use a slice of the Cube as Perspective

I don't see how this could be done in a perspective with the current version of icCube. Seeing a part of the data is something you can do in the security.

An easier version is adding as a FILTER BY at the end of your query :

SELECT
...
FROM (Select {antoher filter } on 0 from [Cube] )
FILTER BY [traffic_channel].[traffic_channel].[SEO]

Another option is adding a javascript hook that does this for all request but it looks somehow dangerous.

Perspective and Translatez Moves Diagonally