html - Google 站点 HTML 框不允许 css 转换工作

Question

为什么会出现此错误？

“css 属性转换有错误的值:==>倾斜(-5 度)<== 旋转(-5 度)”

我正在尝试将 HTML 和 CSS 添加到 HTML Box 中，但我不断收到有关 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>

帮助将不胜感激!

Answer 1

您应该使用 skewX(5deg) 或 skewY(5deg) 或两者。 skew() 没有简写。