时间戳

首页 > 解决方案 > CSS 无法撤消变换：skewY？

html - CSS 无法撤消变换：skewY？

问题描述

因此，我使用 旋转了一个 div transform: skewY(8deg);，我想使用 将 div 的内容旋转回其原始状态transform: skewY(-8deg);，虽然它确实有效，但似乎对a#buy. 有没有办法解决它，或者一个简单的修复？

我的 HTML：

<div class="offers">
            <div id="offer1">
                <img id="ak" src="./img/AK.png">
                <p id="name">AK</p>
                <p id="price">57,53€&lt;/p>
                <p id="wear">0.0647</p>
                <a id="buy" href="linkhere">Buy</a>
            </div>
</div>

我的 CSS：

div.offers {
    display: flex;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    margin-top: 632px;
    text-align: center;
    height : 400px;
}

div.offers div#offer1 {
    position: relative;
    display: inline-block;
    background-color: #514538;
    width: 250px;
    height: 350px;
    border: 2px solid #FFA500;
    margin: auto;
    transform: skewY(8deg);
    margin-top: 50px;
}

div.offers div#offer1 p#name, p#price, p#wear, a#buy {
    transform: skewY(-8deg);
}

标签： htmlcss

解决方案

我假设您只是在谈论购买 href 吗？您可以通过更改它的显示属性来解决此问题。对于将来具有此功能的任何其他元素也是如此。href 是内联的，因此它将忽略诸如 skew 之类的属性，但也会忽略边距，直到您将其设置为例如inline-block或block。

所以只需这样做：

a#buy {
   display: inline-block;
   /*or*/
   /*display: block;*/
}

当你在它的时候。为什么不将#buy 改为一个类（.buy）呢？这似乎是您可以更频繁地重复使用的属性。其他一些id也一样。

推荐阅读