CSS3中Transform动画属性用法详解

发布时间：2020-03-14 11:08:43 所属栏目：系统来源：站长网

导读：这篇文章主要为大家详细介绍了CSS3中Transform动画属性用法，教大家如何实现2D transform变换、3D transform变换，感兴趣的小伙伴们可以参考一下

-o-transform:skew(30deg,-20deg); /* Opera */

}

</style>

</head>

<body>

<div>translate</div>

</div>

<div>rotate</div>

</div>

<div>scale</div>

</div>

</div>

</body>

</html>

效果如下：

CSS3中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;

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

3/8

首页

尾页