How to Position Element in The Correct 3D Position with CSS Perspective

How to position element in the correct 3d position with css perspective

perspective needs to be added to the parent, not to the child. The rest are details:

span {  background: green;  width: 256px;  height: 176px;  position: absolute;  top: 0;  left: 0;  transform: rotateX(1deg) rotateY(-7deg) rotateZ(-1deg) skew(-11.25deg, 1.5deg) translate(233px, 37px);  opacity: 0.5;}
div {  position: relative;  perspective: 400px;  width: 1200px;}
img {  width: 500px;  height: auto;}
body {  overflow-x: hidden;}

<div>  <span></span>  <img src="https://i.stack.imgur.com/iL2xf.png" /></div>

Positioning of 3d element in css

I must be confused on what your asking. If your talking about centering the wheel, then in "c1", just use: margin: 1.5em auto 0 auto;

3D CSS Transform element positioning

User browsers add margins to your front and back classes which is relative to the font size. To fix this, add a margin: 0 to each of them in the CSS.

.front, .back {
    margin: 0;
}

---

If things start breaking, take note that Webkit browsers add these rules,

-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 40px;
-webkit-margin-end: 40px;

and that other browsers add custom rules. Firefox adds the following:

margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;

See HTML5 <figure> margin/padding and Altering margin in figure tag.

Position div over image with CSS 3D transforms like augmented reality

The best I could do:

.tv .tv-content {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.75;
    width: 392px;
    height: 356px;
    transform: translateX(193px) translateY(211px) translateZ(0) rotateX(-11deg) rotateY(-40deg) rotateZ(-19.5deg);
    transform-origin: 0px 150px;
    line-height: 300px;
    text-align: center;
    font-size: 32px;
    background-color: red;
    color: blue;
}

https://jsfiddle.net/Lzf2umzf/

Will that help?

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>

How to get screen position of CSS3-3d transformed elements?

Have you tried using getBoundingClientRect()?

I've used it successfully in the past to calculate the dimensions of elements that have been transformed with the transform property.

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.

How to use css perspective to match a div to visually fit inside a svg laptop screen?

Change below CSS

.container {
/*   perspective: 500px; */
}

.screenContents {
 transform: perspective(3651px) rotateY(-30deg) rotateX(18deg) rotate(3deg);
 --scale: 37;
 width: calc(16px * var(--scale));
 height: calc(10px * var(--scale));
}

---

Related Topics