I started animation practice today.

I have a 3d box that I am rotating but no matter how big the viewing area is it flies way higher than it needs to and jumps off the page before coming down.

on your particular screen it may just not have enough room but no matter how small I make it , it still overflows the top of the screen.

Also, is it possible to just rotate in place with something like this as well?

Codepen

I don't think this code is gonna tell enough but stack overflow forced me to put something with the codepen.

.perspective {
transform-style: preserve-3d;
--px3d: 50px;
animation: boxanimation 5s linear 1s 
infinite;
}

@keyframes boxanimation {
50% {
transform: rotateX(0deg) 
rotateY(-360deg);
}

100% {
transform: rotateX(360deg) 
rotateY(-360deg);
}
}

CodePudding user response：

If you are looking to rotate your box in place, I would remove the positioning values on the .box elements and put them on the .perspective container, as that is what you are animating. Those positioning values are likely causing some unintended side effects.

Is this what you were looking for?

* {
  box-sizing: border-box;
}

body {
  background-color: rgb(73, 73, 73);
}

.box {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(145, 145, 148);
  box-shadow: black 1px 1px 7px, black 2px 2px 10px inset;
  text-align: center;
  text-shadow: black 3px 3px 5px;
  font-size: 2rem;
  padding-top: 1%;

}

.front {
  transform: translate3d(0, 0, var(--px3d));
  background-color: rgb(1, 220, 249);
}

.back {
  transform: rotateY(180deg) translate3d(0, 0, var(--px3d));
  background-color: rgb(232, 232, 232);
}

.top {
  transform: rotateX(90deg) translate3d(0, 0, var(--px3d));
  background-color: rgba(0, 128, 0);
}

.left {
  transform: rotateY(-90deg) translate3d(0, 0, var(--px3d));
  background-color: rgba(14, 122, 188);
}

.bottom {
  transform: rotateX(-90deg) translate3d(0, 0, var(--px3d));
  background-color: rgba(0, 0, 255);
}

.right {
  transform: rotateY(90deg) translate3d(0, 0, var(--px3d));
  background-color: pink;
}

.perspective {
  position: relative;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  --px3d: 50px;
  animation: boxanimation 5s linear 1s infinite;
  transform-origin: center center;
}

@keyframes boxanimation {
  50% {
    transform: rotateX(0deg) rotateY(-360deg);
  }

  100% {
    transform: rotateX(360deg) rotateY(-360deg);
  }
}

<div >
      <div >Bottom</div>
      <div >Top</div>
      <div >Left</div>
      
      <div >Right</div>
      <div >Back</div>
      <div >Front</div> 
</div>