Safari 中的倾斜不起作用
Skew in Safari not working
转换:倾斜在 Safari 中无法正常工作。
在 Chrome 和 Firefox 中运行良好,但在 Safari 中却不行。
如果有人能帮助我,我将不胜感激。谢谢!
https://codepen.io/alfrex92/pen/PQWgrw
Behavior in safari
What I want
div {
width:200px;
height:80px;
margin:0 auto;
color:#fff;
font-size:2em;
transform:skewX(0) skewY(200deg);
-webkit-transform: skewX(0) skewY(200deg);
overflow: hidden;
}
span {
position: absolute;
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) skew(0, -200deg);
-webkit-transform: translate(-50%, -50%) skewX(0) skewY(-200deg);
}
.bg {
width:200px;
height:160px;
background-image: url(https://picsum.photos/458/354?random);
background-size: cover;
background-position: center center;
&-2 {
background-image: url(https://picsum.photos/458/354?random&time=1518166464706);
}
&-3 {
background-image: url(https://picsum.photos/458/354?random&time=1518166454899);
}
&-4 {
background-image: url(https://picsum.photos/458/354?random&time=1518166474771);
}
}
<div>
<span class="bg"></span>
<span>01</span></div>
<div >
<span class="bg bg-2"></span>
<span>O2</span>
</div>
<div>
<span class="bg bg-3"></span>
<span>03</span>
</div>
<div >
<span class="bg bg-4"></span>
<span>04</span>
</div>
尝试添加以下内容
div.skew
{
transform: skewX(20deg) skewY(35deg); /* W3C */
-webkit-transform: skewX(20deg) skewY(35deg); /* Safari & Chrome */
-moz-transform: skewX(20deg) skewY(35deg); /* Firefox */
-ms-transform: skewX(20deg) skewY(35deg); /* Internet Explorer */
-o-transform: skewX(20deg) skewY(35deg); /* Opera */
}
我找到了答案。
我加了
position:relative;
里面<div>
转换:倾斜在 Safari 中无法正常工作。
在 Chrome 和 Firefox 中运行良好,但在 Safari 中却不行。
如果有人能帮助我,我将不胜感激。谢谢!
https://codepen.io/alfrex92/pen/PQWgrw
Behavior in safari
What I want
div {
width:200px;
height:80px;
margin:0 auto;
color:#fff;
font-size:2em;
transform:skewX(0) skewY(200deg);
-webkit-transform: skewX(0) skewY(200deg);
overflow: hidden;
}
span {
position: absolute;
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) skew(0, -200deg);
-webkit-transform: translate(-50%, -50%) skewX(0) skewY(-200deg);
}
.bg {
width:200px;
height:160px;
background-image: url(https://picsum.photos/458/354?random);
background-size: cover;
background-position: center center;
&-2 {
background-image: url(https://picsum.photos/458/354?random&time=1518166464706);
}
&-3 {
background-image: url(https://picsum.photos/458/354?random&time=1518166454899);
}
&-4 {
background-image: url(https://picsum.photos/458/354?random&time=1518166474771);
}
}
<div>
<span class="bg"></span>
<span>01</span></div>
<div >
<span class="bg bg-2"></span>
<span>O2</span>
</div>
<div>
<span class="bg bg-3"></span>
<span>03</span>
</div>
<div >
<span class="bg bg-4"></span>
<span>04</span>
</div>
尝试添加以下内容
div.skew
{
transform: skewX(20deg) skewY(35deg); /* W3C */
-webkit-transform: skewX(20deg) skewY(35deg); /* Safari & Chrome */
-moz-transform: skewX(20deg) skewY(35deg); /* Firefox */
-ms-transform: skewX(20deg) skewY(35deg); /* Internet Explorer */
-o-transform: skewX(20deg) skewY(35deg); /* Opera */
}
我找到了答案。
我加了
position:relative;
里面<div>