CSS3 二维变形

来源：互联网发布：淘宝卖家店铺被冻结编辑：程序博客网时间：2024/06/05 09:07

CSS3二维变形

1、Transform转换属性

特点所有的二维（转化），都是刷的一声就过去了，没有任何的过渡效果

2、Transform 方法

（1）偏移：translate（x,y）

x是水平方向的移动，y是竖直方向的移动。当他们为负值的时候，则表示反方向移动
使用该方法可以实现元素水平和垂直方向的居中

<style>        *{            padding: 0;            margin: 0;        }        .box{            width: 100px;            height: 100px;            background: red;            position: fixed;            top:50%;            left: 50%;            transform: translate(-50%,-50%);        }    </style></head><body><div class="box"></div></body>

translateX()等价于translate(x,0)
translateY()等价于translate(0,y)

（2）缩放:scale(x,y)

X表示放大或者缩小元素的宽度，Y表示放大或者缩小元素的高度。
ScaleX();是只对元素宽度进行缩放。
ScaleY();是只对元素高度进行缩放。
当里面的值为负值的时候，是先把元素进行了反转，然后再执行元素的缩放操作。

（3）旋转:rotate(Xdeg)

Deg是转换的角度单位，当X为正的时候，元素沿着顺时针旋转，反之则是逆时针旋转

（4）倾斜:skew(Xdeg,Ydeg)

X表示的是元素绕着水平方向倾斜Xdeg，Y表示的是元素绕着竖直方向倾斜Ydeg
当XY为负值的之后，他们则绕着反方向进行倾斜

（5）使用六个值的矩阵: matrix

Matrix(a,b,c,d,e,f)
比如matrix(1,0,0,1,200,200),表示将元素向左移动200px，向下移动200px；

阅读全文

0 0