css深入剖析transform的skew
程序员文章站
2022-06-24 12:41:42
skew一、skew1.skew(x,y)2.斜切目标3.实例运用一、skew1.skew(x,y)指定对象skew transformation(斜切扭曲)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0.box { width: 150px; height: 150px; background-color: black; transform-origin: 0 0; transform: skew(45deg);}.bo...
skew
一、skew
1.skew(x,y)
指定对象skew transformation(斜切扭曲)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0
.box {
width: 150px;
height: 150px;
background-color: black;
transform-origin: 0 0;
transform: skew(45deg);
}
.box {
width: 150px;
height: 150px;
background-color: black;
transform-origin: 0 0;
transform: skew(45deg,30deg);
}
2.斜切目标
改属性实际上会改变方块所在的坐标系
<style>
*{
margin: 0;
padding: 0;
}
body {
perspective: 800px;
transform-style: preserve-3d;
}
div {
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background-color: black;
transform: skew(45deg);
}
</style>
<hr style="position: absolute;top: 100px;width: 100%;">
<div></div>
<hr style="position: absolute;top: 200px;width: 100%;">
在上面虽然设置的是x轴斜切角度,实际拉伸的是y坐标轴
div {
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background-color: black;
transform: skew(45deg,30deg);
}
当在设置y轴时,实际x轴被拉伸。
3.实例运用
深度变换
div {
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background-color: black;
animation: run 4s cubic-bezier(0,0,1,1) infinite alternate;
}
@keyframes run{
0%{
transform: skew(45deg,45deg);
}
50%{
transform: skew(0deg,0deg);
}
100%{
transform: skew(-45deg,-45deg);
}
}
本文地址:https://blog.csdn.net/xun__xing/article/details/107456533