Question

我有以下样式：

#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{
}

我的HTML看起来像这样：

<div id="logo-wrapper">

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

</div>

父div（logo-wrapper）的webkit样式正在使子div（logo）内的图像成角度！

有没有办法从子div中删除角度效果，以便正常显示徽标图像？

由于

Answer 1

你可以对某些伪元素应用transform，避免整个元素试试这个：

#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;
}

有了这个，你可以避免对内部的每个元素产生反转，如果你想做一些改变，那就更好了。

Answer 2

你可以尝试：

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

这是fiddle

Answer 3

你只需要扭转图像上的倾斜

＆＃13;

#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);
}

＆＃13;

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

＆＃13;

Answer 4

找到它。

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

由于

从子div中删除/禁用CSS webkit样式

4 个答案: