Differencebetween Perspective and Transform's Perspective Properties in CSS

What is the difference between perspective and transform's perspective properties in CSS?

My basic understanding of perspective vs transform perspective is simply that the plain perspective attribute is what you usually use on a parent element to give multiple children the same perspective, while transform perspective would be used on a child element or an individual element to give it its own perspective.

This is most easily seen when you are applying these effects to more than one element:

perspective: ; on a parent element:

.perspective-Parent {

  -moz-perspective: 2000px;

  -ms-perspective: 2000px;

  -webkit-perspective: 2000px;

  perspective: 2000px;

  -moz-perspective-origin: 50% 50%;

  -ms-perspective-origin: 50% 50%;

  -webkit-perspective-origin: 50% 50%;

  perspective-origin: 50% 50%;

}

.page {

  background-color: red;

  -moz-transform-origin: right center;

  -ms-transform-origin: right center;

  -o-transform-origin: right center;

  -webkit-transform-origin: right center;

  transform-origin: right center;

  -ms-transform: rotateY(75deg);

  -moz-transform: rotateY(75deg);

  -o-transform: rotateY(75deg);

  -webkit-transform: rotateY(75deg);

  transform: rotateY(75deg);

  width: 200px;

  height: 100px;

  margin: 10px; /* added to make difference more visible */ 

}

<div class="perspective-Parent">

  <div class="page"></div>

  <div class="page"></div>

  <div class="page"></div>

</div>

What is the different of css perspective: and transform: perspective()?

The perspective CSS property gives an element a 3D-space by affecting the distance between the Z plane and the user.

The strength of the effect is determined by the value. The smaller the value, the closer you get from the Z plane and the more impressive the visual effect. The greater the value, the more subtle will be the effect.

Important: Please note the perspective property doesn't affect how the element is rendered; it simply enables a 3D-space for children elements. This is the main difference between the transform: perspective() function and the perspective property. The first gives element depth while the later creates a 3D-space shared by all its transformed children.

Refer to https://css-tricks.com/almanac/properties/p/perspective/

Is there any difference between CSS perspective rule and value?

According to this website there is.

These two formats both trigger a 3D space, but there is a difference. The functional notation is convenient for directly applying a 3D transform on a single element ... But when used on multiple elements, the transformed elements don’t line up as expected. If you use the same transform across elements with different positions, each element will have its own vanishing point. To remedy this, use the perspective property on a parent element, so each child may share the same 3D space.

what is the difference between perspective origin and transform origin in css

perspective is used to set the view angle for a element's children.

perspective origin is the point in space from where you are looking at the element

transform is the simple coordinate thing which is used to rotate/translate object(element).

transform origin sets the point about which you are translating/rotating an object.

for an instance you want to rotate an div at 45 degrees about x-axis(horizontal axis).

you use transform:rotateX(45deg);

div will rotate but you still see a rectangle on screen as you are looking at it from z axis with no perspective.

but when you increase perspective, you will see the 3d view of the div.


the center of your eye is set by perspective-origin.
default value is 50% 50% means center.
increasing and decreasing x or y value will move your "eye" accordingly.

transform origin on the other hand sets the point of transform for example if you need to rotate an rectangle about any other point other than its center, the you will use transform-origin property

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>

perspective() problems fixed with perspective?

Keep the pespective constant, don't change it on hover.

Just add to .card: (no rotation, but the same pespective that you are setting on hover)

transform: perspective(1000px) rotateY(0deg);

.front,

.back,

.card {

  width: 100px;

  height: 170px;

  border-radius: 10px;

  text-align: center;

}

.card {

  position: relative;

  transition: transform 1s ease-in-out 0s;

  transform-style: preserve-3d;

  transform-origin: right;

  transform: perspective(1000px) rotateY(0deg);

}

.card:hover {

  transform: perspective(1000px) rotateY(180deg);

}

.front {

  background-color: red;

}

.back {

  background-color: blue;

  transform: rotateY(180deg);

  position: absolute;

  top: 0px;

  z-index: -1;

}

<div class="card">

  <div class="front">

    FRONT

  </div>

  <div class="back">

    BACK

  </div>

</div>

What is the difference between -webkit-transform:perspective and -webkit-perspective

I think this is a pretty clear explanation:

The -webkit-perspective property applies the same transform as the perspective() transform function, except that it applies only to the children of the element, not to the transform on the element itself.

Source: CSS property: -webkit-perspective

What on earth is CSS3 perspective property?

In 3D transformations, perspective gives the object a 3D point of view and attempts to render the perspective of the 3D object from a particular viewer's perspective. It is not easy to understand.

Here's a Safari reference on it.

A beginning tutorial on it.

Some examples of using perspective.

Some more examples.

FYI, in the future I'd suggest disregarding all Google search hits that come from w3schools. They have somehow managed to co-opt a high Google searching ranking with incredibly shallow content.

With the use of css 3d transforms and perspective, I can't interract anymore with clickable elements in Firefox, but it works in chrome/Safari

I am not using CSS transforms that often, but there is surely an overusage of property:

-moz-transform-style: preserve-3d.

As w3schools article points out:

This property must be used together with the transform property.

This was also mentioned by the previous answerer @Jenny Pittman while I was writing this, so I hope you won't be mad :)

So what I did is I disabled this piece of your code:

.site-content > .inside #primary #main > article > .entry-content {
    -moz-transform-style: preserve-3d;
}

in the file all.css at line 999.

And for other elements to properly show up I added position: relative to your main sections CSS like so:

body:not(.has-sidebar):not(.search):not(.archive).home .entry-header-single > *, body:not(.has-sidebar):not(.search):not(.archive).home .page-content > *, body:not(.has-sidebar):not(.search):not(.archive).home .entry-footer > *, body:not(.has-sidebar):not(.search):not(.archive).home .entry-content-single > *, body:not(.has-sidebar):not(.search):not(.archive).home .post-navigation, body:not(.has-sidebar):not(.search):not(.archive).home .uagb-section__inner-wrap, body:not(.has-sidebar):not(.search):not(.archive).home .wp-block-group__inner-container {
    max-width: 1000px;
    width: 82%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

in the file all.css at line 881.

Edit:

I noticed that performing the actions above hides the second screen-wide photo you have. So I would suggest moving this element and it's next neighbour out of their parent element:

<div class="entry-content entry-content-single">
  ...
  <div class="wp-block-image size-full is-resized parallax">...</div>
  <div class="wp-block-group team">...</div>
</div>

and placing them right next to it like so:

<div class="entry-content entry-content-single">...</div>
<div class="wp-block-image size-full is-resized parallax">...</div>
<div class="wp-block-group team">...</div>

This should help.

Also you probably want to disable this:

.site-content > .inside #primary #main > article {
    -moz-transform-style: preserve-3d;
}

in the file all.css at line 997.

CSS 3d transform doesn't work if perspective is set in the end of property

You should make the perspective first in both cases. If you add it at the end the translation will be first made without considering the perspective.

If we refer to the specification we can see how the transformation matrix is computed:

The transformation matrix is computed from the transform and
transform-origin properties as follows:

1. Start with the identity matrix.

2. Translate by the computed X and Y of transform-origin

3. Multiply by each of the transform functions in transform property from
   left to right

4. Translate by the negated computed X and Y values of transform-origin

As you can see in the step (3), it's from left to right (here is another question where you can get more information and see why order is important: Simulating transform-origin using translate)

It also useless to use the perspective property within the element you want to transform.

box:nth-child(1):hover {

  transform: perspective(1000px) translate3d(0, 0, -100px);

}

box:nth-child(2):hover {

  transform: perspective(1000px) translate3d(0, 0, 100px);

}

box {

  padding: 20px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-family: monospace;

  transition: transform .4s;

  background: rgba(255, 0, 0, 0.3);

  margin: 20px;

  /*perspective: 1000px;*/

  font-size: 12px;

  cursor: pointer;

}

box:nth-child(2) {

  background: rgba(0, 0, 255, 0.3);

}

<box>

  transform: perspective(1000px) translate3d(0,0,100px);

</box>

<box>

  transform:  perspective(1000px) translate3d(0,0,100px);

</box>

---

Related Topics