0

为什么我会收到此错误?

“css 属性转换的值不正确:==>skew(-5deg)<== rotate(-5deg)”

我正在尝试将 HTML 和 CSS 添加到 HTML 框中,但我不断收到有关 CSS 中的转换的错误。我希望能够对我的 HTML 中的元素使用这些变换效果。它在 Google Chrome 浏览器的普通 HTML 页面中正常工作。这是我正在尝试的网站的链接:https ://sites.google.com/site/pghsguidance/home ... HTML 框就在“新生通讯”链接下方。这是我的 HTML 框代码:

<style>
    .box {
        position: relative;
        width: 500px;
        padding: 50px;
        margin: 0 auto;
        background-color: #fff;
        -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
        -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
    }

    .box:before, .box:after {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        width: 40%;
        height: 10px;
        content: ' ';
        left: 12px;
        bottom: 12px;
        background: transparent;
        -webkit-transform: skew(-5deg) rotate(-5deg);
        -moz-transform: skew(-5deg) rotate(-5deg);
        -ms-transform: skew(-5deg) rotate(-5deg);
        -o-transform: skew(-5deg) rotate(-5deg);
        transform: skew(-5deg) rotate(-5deg);
        -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
        -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
        z-index: -1;
        /***** Transition *****/
        -webkit-transition: visibility 0s linear 0.15s, opacity 0.15s linear;
        -moz-transition: visibility 0s linear 0.15s, opacity 0.15s linear;
        -ms-transition: visibility 0s linear 0.15s, opacity 0.15s linear;
        -o-transition: visibility 0s linear 0.15s, opacity 0.15s linear;
        transition: visibility 0s linear 0.15s, opacity 0.15s linear;
    } 

    .box:after {
        visibility: hidden;
        opacity: 0;
        left: auto;
        right: 12px;
        -webkit-transform: skew(5deg) rotate(5deg);
        -moz-transform: skew(5deg) rotate(5deg);
        -ms-transform: skew(5deg) rotate(5deg);
        -o-transform: skew(5deg) rotate(5deg);
        transform: skew(5deg) rotate(5deg);
    }

    .box:hover:before, .box:hover:after {
        visibility: visible;
        opacity: 1;
        transition-delay: 0s;
    }
</style>

<div class="box">
    <p>bam</p>
</div>

帮助将不胜感激!

4

1 回答 1

0

你应该使用skewX(5deg)skewY(5deg)两者兼而有之。没有简写skew()

于 2015-10-16T03:04:08.247 回答