CODEWITHSUNDEEP
htmlcssrotationtranslate
user13638842
user13638842

Reputation:

How to use translateZ( ) transform with rotateY( ) using CSS?

I was trying to use translateZ with rotateY to see clear differences but as soon as i hover the div the rotateY retrieves. The code is as follows- 

.box {
  width: 350px;
  height: 250px;
  background: tomato;
  transform: rotateY(70deg);
  transition: transform 2s ease;
}

.box:hover {
  transform: perspective(500px) translateZ(300px);
}
<div class="parent">
  <div class="box">Some text</div>
</div>

This same thing also happens when i try to use translateX instead of Z. Please help..

Upvotes: 1

Views: 161

Answers (1)

Yousaf
Yousaf

Reputation: 29282

You need to specify rotateY on :hover as well because on transform property in .box:hover will override the transform property in .box

.box {
  width: 350px;
  height: 250px;
  background: tomato;
  transform: rotateY(70deg);
  transition: transform 2s ease;
}

.box:hover {
  transform: perspective(500px) translateZ(300px) rotateY(70deg);
}
<div class="parent">
  <div class="box">Some text</div>
</div>

Upvotes: 1

Related Questions