CSS Transform rotateY not working properly-CodePudding

So, i have three div's called "point", inside it h1 with class "name" and text. I'm trying to make like 3d effect with perspective on h1 tags. Code:

.point {
  width: 100%;
  perspective: 200px;
  perspective-origin: left;
}

.name {
  width: 500px;
  font-weight: bold;
  font-size: 92px;
  transition: 0.5s;
  transform: rotateY(30deg);
  transform-origin: left center;
}

.name:hover {
  font-size: 105px;
}

<div >
  <h1 >ПУНКТ 1</h1>
</div>

<div >
  <h1 >ПУНКТ 2</h1>
</div>

<div >
  <h1 >ПУНКТ 3</h1>
</div>

But, in browser it looks like this:

Every new point breaks the transformation for a bit. You can see that every new element it a bit lower or has a different perspective. But every point element has only one perspective property. How can i fix this?

CodePudding user response：

you need to put the transform:rotateY in the .name:hover instead of the .name like this

            .name{
             width: 500px;
             font-weight: bold;
             font-size: 92px;
             transition: transform 0.5s;
             transform-origin: left center;
        }
        .name:hover {
            transform: rotateY(30deg);
        }

you can keep the .point class the same. hopes this is helpfull.

CodePudding user response：

You need move transform: transform:rotateY(30deg); to .name:hover

CodePudding user response：

Some margin value sets in h1 .name class.

.name {
  width: 500px;
  font-weight: bold;
  font-size: 92px;
  transition: 0.5s;
  transform: rotateY(30deg);
  transform-origin: left center;
  margin: 0;
}

Hope, it helps.