[ Remove/Disable CSS webkit styling from child div ]

I have the following styling:

#logo-wrapper{
    width: 397px;
    height: 190px;
    float: left;
    -webkit-transform: skewX(-20deg);
    -moz-transform: skewX(-20deg);
    -ms-transform: skewX(-20deg);
    -o-transform: skewX(-20deg);
    transform: skewX(-20deg);
    -webkit-transition: width 1.2s ease-in-out;
    -moz-transition: width 1.2s ease-in-out;
    -ms-transition: width 1.2s ease-in-out;
    -o-transition: width 1.2s ease-in-out;
    transition: width 1.2s ease-in-out;
}

#logo{
}

and my HTML looks like this:

<div id="logo-wrapper">

<div id="logo">
<a href="#"><img src="images/logo.jpg" alt="Logo" /></a>
</div>

</div>

The webkit styling of the parent div (logo-wrapper) is making the image inside the child div (logo) angled!

Is there a way to remove the angle effect from the child div so that the logo image displays normally?

Thanks

Answer 1

You can apply that transform on some pseudo-element avoiding the entire element try this:

#logo-wrapper{
  width: 397px;
  height: 190px;
  float: left;
  position:relative;
}
#logo-wrapper:after { 
  content:" ";
  display:block;
  position:absolute;
  z-index:-1;
  top:0;bottom:0;left:0;right:0;
  -webkit-transform: skewX(-20deg);
  -moz-transform: skewX(-20deg);
  -ms-transform: skewX(-20deg);
  -o-transform: skewX(-20deg);
  transform: skewX(-20deg);
  -webkit-transition: width 1.2s ease-in-out;
  -moz-transition: width 1.2s ease-in-out;
  -ms-transition: width 1.2s ease-in-out;
  -o-transition: width 1.2s ease-in-out;
  transition: width 1.2s ease-in-out;
} 

With this you avoid reverse the effect on each element inside and is better if you want to make some change.

Answer 2

You could try:

   #logo {
        -webkit-transform:  skewX(+20deg);
    -moz-transform: skewX(+20deg);
    -ms-transform: skewX(+20deg);
    -o-transform: skewX(+20deg);
    transform: skewX(+20deg);
    }

Here is a fiddle

Answer 3

You just need to reverse the skew on the image

#logo-wrapper {
  width: 397px;
  height: 190px;
  float: left;
  -webkit-transform: skewX(-20deg);
  -moz-transform: skewX(-20deg);
  -ms-transform: skewX(-20deg);
  -o-transform: skewX(-20deg);
  transform: skewX(-20deg);
  -webkit-transition: width 1.2s ease-in-out;
  -moz-transition: width 1.2s ease-in-out;
  -ms-transition: width 1.2s ease-in-out;
  -o-transition: width 1.2s ease-in-out;
  transition: width 1.2s ease-in-out;
  background-color: blue;
}
#logo {
  -webkit-transform: skewX(20deg);
}

<div id="logo-wrapper">

  <div id="logo">
    <a href="#">
      <img src="http://ipsumimage.appspot.com/100" alt="Logo" />
    </a>
  </div>

</div>

Answer 4

Found it.

-webkit-transform: skewX(20deg);
-moz-transform: skewX(20deg);
-ms-transform: skewX(20deg);
-o-transform: skewX(20deg);
transform: skewX(20deg);

Thanks