css3学习之2D转换

最新推荐文章于 2024-07-13 15:14:03 发布

guxiansheng1991

最新推荐文章于 2024-07-13 15:14:03 发布

阅读量217

点赞数

分类专栏： css3 文章标签： 2d

本文链接：https://blog.csdn.net/guxiansheng1991/article/details/79701251

版权

css3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

2d转换是相对定位,使用要加前缀

API列表

translate(x,y)  ,相对于坐标原点的移动
rotate(xdeg)    ,顺时针旋转xdeg,负数为逆时针旋转
scale(x,y)      ,以元素x轴或者y轴的中间线为起点,进行放大x或者y的倍数
skew(xdeg,ydeg) ,以元素x轴整体或者y轴整体为轴线,y轴顺时针翻转,x轴逆时针翻转
matrix()        ,matrix() 方法把所有 2D 转换方法组合在一起,方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素

使用示例

.d{
    width: 100px;
    height: 100px;
    background: rgba(0,0,0,0.6);
}
.d-translate{
    transform: translate(100px,50px);
}
.d-rotate{
    transform: rotate(30deg);
}
.d-scale{
    transform: scale(0.5,2);
}
.d-skew{
    transform: skew(10deg,0deg);
    /*transform: skew(0deg,10deg);*/
}