CODEWITHSUNDEEP
htmlcssperspective
adas didas
adas didas

Reputation: 11

Im unable to use perspective-origin in css

i have tried to change perspective origin and its not working . Can someone explain that why it is not working or if it is working , what am i doing or understanding wrong. I have shown the html and css below.

:root {
  --boxColor: #0ff7
}

body {
  align-items: center;
  justify-content: center;
  display: flex;
  background-color: black;
  min-height: 100vh;
  font-size: 50px;
  perspective: 10px;
  perspective-origin: 50% calc(50% - 2em)
} /* Im asking this line */
.scene {
  position: relative;
  transform-style: preserve-3d;
}

.ball {
  background: lightblue;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: absolute;
  top: -3em;
  left: -1em;
}

.cube {
  background: var(--boxColor);
  height: 3em;
  width: 3em;
  position: absolute;
  top: -2em;
  left: -2em;
}

.floor {
  width: 10em;
  height: 0.4em;
  background: repeating-linear-gradient(to top right, red, blue);
  position: absolute;
  top: 0.7em;
  left: -6em;
  transform: rotateX(90deg);
}
<div class="scene">
  <div class="floor"></div>
  <div class="cube"></div>
  <div class="ball"></div>
</div>

I am telling in reference to this video https://www.youtube.com/watch?v=NdftnCDwKaU

Upvotes: 0

Views: 193

Answers (1)

4Surely
4Surely

Reputation: 1

I have been working to solve the same problem for a while now. After many shots in the dark and educated guesses I believe I know how to get your perspective-origin to move in the upward direction. Instead of 50%(50%-2em) try simply putting (perspective-origin: 50% 50%-20). Don't use "em" and put any number after the subtraction.

Upvotes: 0

Related Questions