谷歌網站HTML框不允許css轉換工作

Question

爲什麼我得到這個錯誤？

「CSS屬性變換具有壞值：==>歪斜（-5deg）< ==旋轉（-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> 

幫助，將不勝感激！

Answer 1

您應該使用skewX(5deg)或skewY(5deg)或兩者。 skew()沒有簡寫。