css3变形与动画（上）

最新推荐文章于 2022-06-16 18:45:22 发布

原创最新推荐文章于 2022-06-16 18:45:22 发布 · 202 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3

CSS3动画:

1、旋转 rotate(n)

旋转函数rotate()通过指定的角度参数使元素相对原点进行旋转；

n为参数，用于设置旋转的角度，如果为正，元素相对原点中心顺时针旋转；如果为负，逆时针旋转。

例：

CSS部分中的“.wrapper div”展示的效果：(n为参数，用于设置旋转的角度，如果为负，元素相对原点中心逆时针旋转；)

CSS部分中的“.wrapper span”展示的效果：(n为参数，用于设置旋转的角度，如果为正，元素相对原点中心顺时针旋转；)

2、扭曲skew()

定义：元素倾斜显示，将对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。

3种使用情况：

skew(x,y)元素同时在水平方向和垂直方向扭曲；
skewX(x)元素仅在水平方向扭曲；
skewY(y)元素仅在垂直方向扭曲；

例：

HTML部分：

<div><span>我不想旋转(^_^)</span></div>

</div>

CSS部分：

.wrapper {

margin: 100px auto;

width: 300px;

height: 200px;

border: 2px dotted blue;

}

.wrapper div{

width: 300px;

height: 200px;

line-height: 200px;

text-align: center;

background: green;

color: #fff;

-webkit-transform: skew(45deg);

-moz-transform: skew(45deg);

transform: skew(45deg);

}

.wrapper span {

display:block;

-webkit-transform: skew(-45deg);

-moz-transform: skew(-45deg);

transform: skew(-45deg);

}

3、缩放scale()

定义：让元素根据中心原点对对象进行缩放。

3种使用情况：

scale(x,y) 使元素水平方向和垂直方向同时缩放；
scaleX(x) 元素仅水平方向缩放；
scaleY(y) 元素仅垂直方向缩放；

注意：

scale()的取值默认为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于等于1.01的值，作用让元素放大。

例：

HTML部分：

</div>

CSS部分：

.wrapper {

width: 200px;

height: 200px;

border:2px dashed red;

margin: 100px auto;

}

.wrapper div {

width: 200px;

height: 200px;

line-height: 200px;

background: orange;

text-align: center;

color: #fff;

}

.wrapper div:hover {

opacity:0.5;

-webkit-transform: scale(0.8);

-moz-transform: scale(0.8);

transform: scale(0.8);

}

Transform：属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

4、位移translate

定义：元素向指定的方向移动；

三种情况：

translate(x,y)水平方向和垂直方向同时移动；
translateX(x)仅水平方向移动；
translateY(y)仅垂直方向移动；

例：

HTML部分：

我不知道我的宽度和高是多少，我要实现水平垂直居中

</div>

CSS部分：

.wrapper {

padding: 20px;

background:orange;

color:#fff;

position:absolute;

top:50%;

left:50%;

border-radius: 5px;

-webkit-transform:translate(-50%,-50%);

-moz-transform:translate(-50%,-50%);

transform:translate(-50%,-50%);

}

5、矩阵 matrix()

语法：matrix(a,b,c,d,e,f);

参数说明： a 表示水平伸缩；b表示垂直扭曲；c表示水平扭曲；d表示垂直伸缩；e表示水平位移；f表示垂直位移；

SO……matrix(scaleX(x),skewY(y),skewX(x),scaleY(y),translateX(x),translateY(y));

例：

HTML部分：

</div>

CSS部分：

.wrapper {

width: 300px;

height: 200px;

border: 2px dotted red;

margin: 40px auto;

}

.wrapper div {

width:300px;

height: 200px;

background: orange;

-webkit-transform: matrix(1,0,0,1,50,50);

-moz-transform:matrix(1,0,0,1,50,50);

transform: matrix(1,0,0,1,50,50);

}

6、原点 transform-origin

定义：默认的元素的中心点居于元素x轴和y轴的50%处；transform-origin的作用在于可以改变原点位置，是元素原点不在中心位置。

取值：

关键词	百分比

top=top center=center top	50% 0
right=right center=center right	100%或（100% 50%）
Bottom=bottom center=center bottom	50% 100%
left=left center=center left	0或（0 50%）
center = center center	50%或（50% 50%）
top left=left top	0 0
right top=top right	100% 0
bottom right=right bottom	100% 100%
bottom left=left bottom	0 100%