CODEWITHSUNDEEP
htmlcss
32423hjh32423
32423hjh32423

Reputation: 3088

Only right hand side of link clickable after css transform in Chrome

Here is a codepen to illustrate http://codepen.io/anon/pen/GynKp

The HTML

<section>
  <a href="#" class="btn"><span>Text<br />Line Two</span></text>
</section>

CSS

section{
  width: 300px;
  margin: 30px auto;
  text-align: center;
  border: 1px solid #ccc;
}

section a.btn{
  margin: 30px auto;
  display: block;
  background-image:url('http://dummyimage.com/200x100/000/fff.png&text=+');
  height: 100px;
  width: 200px;
  color: #fff;
  line-height: 100px;
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  -ms-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out; 
}

section a.btn span{
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -ms-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  transition: all 1s ease-out;
}

section:hover a.btn{
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

/* This reverses the text back to LTR */
section:hover a.btn span{
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}

The problem is that in Chrome only the right hand side of the a is clickable after transform.

How do I make the whole black link clickable?

Upvotes: 0

Views: 104

Answers (1)

Yogesh Khatri
Yogesh Khatri

Reputation: 1210

can't exactly find why it doen't work, can be a browser bug but strange behaviour is that if i change the rotation degree of a.btn from 180 to 200deg(anything greater than 198), the clickable part changes to left side. looks like z-plane is shifted as if you apply translateZ(40px), the whole area becomes clickable e.g. 

section:hover a.btn{
  -webkit-transform: translateZ(40px) rotateY(180deg);
  -moz-transform: translateZ(40px) rotateY(180deg);
  -o-transform: translateZ(40px) rotateY(180deg);
  transform: translateZ(40px) rotateY(180deg);
}

Upvotes: 1

Related Questions