CSS3高级特效

2D转换方法

移动:translate()

旋转:rotate()

缩放:scale()

倾斜:skew()

属性:transform

作用:对元素进行移动,旋转,缩放,倾斜。

2D移动

设定元素从当前位置移动到给定位置(x,y)

方法 说明

translate(x,y)2D转换 沿X轴和Y轴移动元素

translateX(n)沿X轴移动元素

translateY(n)沿Y轴移动元素

(因为代码是从上到下开始生效,最后这两个只能生效一个,上面的会被下面的覆盖)

例:我们随便给一个div

*{

margin: 0;

padding: 0;

}

.big{

width: 100px;

height: 100px;

background-color: pink;

}

给一个坐标

*{

margin: 0;

padding: 0;

}

.big{

width: 100px;

height: 100px;

background-color: pink;

transform: translate(100px,200px);

}

如果只给一个值

transform: translate(100px)就只作用于x轴

参照点:元素本身左上角为原点,不脱离标准流

x:正值向原点的右边平移,负值左边。

y:正值向原点的下边平移,负值上边。

旋转

设定元素顺时针旋转给定的角度,负值表示逆时针旋转,默认以容器的中心为原点旋转

语法:transform:rotate(ndeg);

如何改变旋转原点:

transform-origin: x轴距离,y轴距离;

此时以坐标(x,y)为圆心旋转

也可以使用transform-origin: top left;定义以左上角为旋转原点,同理——右下:bottom right;右上:top right;………

例子:

*{

margin: 0;

padding: 0;

}

.big{

width: 100px;

height: 100px;

background-color: pink;

margin: 40px auto;

transform-origin: 50px 100px;

transform: rotate(30deg);

}

我们可以放开想象,对一些有想法的元素设置放置鼠标发生变化,当然我们会发现这个变化过程非常快,我们后面会引入动画解决这一问题,接下来还会了解缩放和倾斜