为什么我会收到此错误?
“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>
帮助将不胜感激!