CSS3中Transform动画属性用法详解(5)

发布时间：2020-03-15 08:13 所属栏目：52 来源：站长网

导读：

导读：前面我们提到的transform的方法都是基于元素的中心来变换的，也就是元素变换的基点默认是元素的中心。但是有时候我们需要在不同的位置对元素进行这些操作，那么我们就可以使用transform-origin来对元素进行基点位置

前面我们提到的transform的方法都是基于元素的中心来变换的，也就是元素变换的基点默认是元素的中心。但是有时候我们需要在不同的位置对元素进行这些操作，那么我们就可以使用transform-origin来对元素进行基点位置改变。该属性可以接收三个参数：

transform-origin: x-axis y-axis z-axis;
•x-axis，表示水平方向上的取值，可以取字符参数值left,center right，也可以取百分比，字符参数值对应的百分值为left=0%;center=50%;right=100%。
•y-axis，表示竖直方向上的取值，还可以设置字符值top,center,bottom，也可以取百分比，字符参数值对应的百分值为top=0%;center=50%;bottom=100%。
•z-axis，表示视图被置于 Z 轴的何处，用于3D变形中。

我们可以设置基点来与之前的transform图形进行对比：

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>

<head>

<title>transform-origin演示</title>

margin: 0;

padding: 0;

}

#container{

width: 800px;

height: 150px;

border: 1px solid blue;

margin: 20px auto;

padding: 20px 20px;

}

#div1 ,#div2, #div3, #div4{

height: 100px;

width: 100px;

border: 1px dashed red;

display: inline-block;

}

#div1 div{

height: 100px;

width: 100px;

background: #63F7ED;

（编辑：ASP站长网）