Issue with transform() rotateY(). Elements are not rotating-CodePudding

I wrote up an animation in which the banner elements will show up on the screen smoothly from the bottom up. The elements should also rotate slightly as they go up the screen. To accomplish that I added a transition property with value of translateY() rotateY(). Unfortunately, while translateY() works just fine, rotateY() does not. I've no idea why. Plz help me fix this issue. Regards.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Starter</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Baloo Da 2:wght@400;500;600;700;800&family=Josefin Slab:ital,wght@0,300;0,400;1,200;1,300;1,400&family=Mulish:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap" rel="stylesheet">
    <link
      rel="stylesheet"
      href="stylesheet.css"
    />
  </head>
          <body>
            <div >
              <div >
                <div ></div>
                <div ></div>
                <div ></div>
              </div>
              <header >
                <div >
                  <img src="bg.jpg">
                </div>
                <div >
                  <h1>Architecture & Interior Design</h1>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
                  <button>Discover now</button>
                </div>
              </header>
            </div>

              <script src="test3.js"></script>
  </body>
  </html>

CSS

*{
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

html{
  font-size: 62.5%;
}

.hamburger-menu{
  width: 3rem;
  height: 3rem;
  position: fixed;
  top: 5rem;
  right: 5rem;
  height: 5rem;
  z-index: 200;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  cursor: pointer;
}

.line{
  width: 100%;
  height: 0.2rem;
  background-color: #fff;
  box-shadow: 0 0.1rem .2rem rgba(0, 0, 0, 0.2);
}

.header{
  width: 100%;
  height: 100vh;
  position: relative;
  perspective: 100rem;
  overflow: hidden;
}

.img-wrapper{
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0 , .8);
  overflow: hidden;
}

.img-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  animation: scale 25s;
}

@keyframes scale{
  0%{
    transform: scale(1.3);
  }
  100%{
    transform: scale(1);
  }
}

.banner{
  position: absolute;
  top: 30%;
  left: 15%;
}

.banner h1{
  font-family: "Baloo Da 2", serif;
  font-size: 8rem;
  font-weight: 300;
  color: #fff;
  width: 50%;
  line-height: 9rem;
  letter-spacing: .2rem;
  text-shadow: 0.3rem .5rem rgba(0, 0, 0, 0.4);
  opacity: 0;
  animation: moveBanner 1s 0.5s forwards;
}

.banner p{
  font-family: "Josefin Slab", serif;
  font-size: 4rem;
  color: #fff;
  width: 70%;
  letter-spacing: 0.1rem;
  margin-bottom: 3rem;
  text-shadow: 0.3rem .5rem rgba(0, 0, 0, 0.4);
  opacity: 0;
  animation: moveBanner 1s 0.7s forwards;
}

.banner button{
  width: 25rem;
  height: 7rem;
  background-color: #c29525;
  border: none;
  font-family: "Muli", serif;
  font-size: 2rem;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0.2rem .4rem rgba(0, 0, 0, 0.2);
  text-shadow: 0 0.3rem .5rem rgba(0, 0, 0, 0.4);
  cursor: pointer;
  opacity: 0;
  animation: moveBanner 1s 0.9s forwards;
}

@keyframes moveBanner{
  0%{
    transform: translateY(40rem) rotateY(-20deg);
  }
  100%{
    transform: translateY(0) rotateY(0);
    opacity: 1;
  }
}

CodePudding user response：

rotateY rotates about the Y axis. So unless you introduce 3d aspects to the CSS nothing will seem to happen.

I think you require rotation about the Z axis, that is, the axis that is coming straight out of the screen.

div {
  width: 300px;
  height: 100px;
  background: green;
  transform: rotateZ(-45deg);
}

<div></div>

CodePudding user response：

I found the solution. Just add a perspective of 100rem to the parent div.

.banner{
  position: absolute;
  top: 30%;
  left: 15%;
  perspective: 100rem;
}