作者：鸳鸯520_205 | 来源：互联网 | 2023-05-23 17:28
注意:这个问题是关于输出的问题,而不是关于任何形状的创建.
我最近创建了一个形状:
.prog {
position: relative;
top: 20px;
width: 150px;
height: 120px;
background: green;
display: inline-block;
transform: skewY(20deg);
transform-origin: 0% 100%;
transition: 0.8s ease;
}
.prog:before {
content: "";
position: absolute;
left: 150px;
width: 150px;
height: 120px;
background: red;
transform: skewY(-40deg);
transform-origin: 0% 100%;
transition: 0.8s ease;
}
在上面的片段中,绿色形状是.prog元素,并且是倾斜的.红色形状是:before第一个元素的伪元素.
我倾斜.prog(偏斜)到20度.现在,我需要:before-20deg.为此,我首先不得不疏忽它.然后将它进一步倾斜20度.
所以最终的skewY价值是-40deg.我应用了这个,并适当的transform-origins.
但问题是两个形状的顶点都没有对齐.他们应该,但他们不是.这是显示问题的图像:
黑色线条仅供参考.
现在更多!
我倾斜-20 -20而不是-40:
transform: skewY(-20deg) skewY(-20deg); <--这有效!
transform: skewY(-40deg); <----------------这不!
1> web-tiki..：
"未被嘲笑"的孩子的行为是正常的,这是歪斜的方式.为了理解这一点,我将简化问题:
为什么不skewX(40deg)一样skewX(20deg) skewX(20deg)？
div {
width: 100px; height: 100px;
position:absolute;
top:20px; left:20px;
transform-origin: 0 0;
}
.d1 {
transform: skewX(40deg);
background: red;
opacity:0.7;
}
.d2 {
transform: skewX(20deg) skewX(20deg);
background: blue;
opacity:0.7;
}
/** FOR THE DEMO **/
body {background: url('http://i.stack.imgur.com/GySvQ.png');background-size: 10px;}
.m {text-align:right;padding-top:105px;}
.m1{width:83px;color:red;border-right:1px solid red;}
.m2 {width:72px;color:blue;border-right:1px solid blue;}
p{margin:0 0 5px 150px;color:red;}
.b{color:blue;}
x = 83
x = 72
skewX(40deg)
skewX(20deg) skewX(20deg)
2> vals..：
skew引入的垂直偏移量等于角度的正切值.因此,偏斜(20度)引入了tan(20deg)的偏移.
为了你的例子工作,它应该是
tan(-20deg) = tan(20deg) + tan( -2 * 20deg)
要么
tan (2 * x) = 2 * tan (x)
但事实并非如此,切线和总和并不是一种联想
扭转所需的倾斜是
result = - atan ( 2 * tan (x))
对于x = 20,给出结果
36,052388732387908475278040193987
(aproximately)
京公网安备 11010802041100号