您的位置首页百科知识

如何使用CSS3属性transform-origin控制元素位置

如何使用CSS3属性transform-origin控制元素位置

的有关信息介绍如下:

如何使用CSS3属性transform-origin控制元素位置

CSS3属性transform-origin设置元素的基础点的位置,属性值可以是百分比、角度、长度、上下左右以及相对于轴的偏移量。下面利用一个实例说明transform-origin属性的用法,操作如下:

第一步,双击打开HBuilder开发工具,新建静态页面origin.html,如下图所示:

第二步,在插入一个div标签元素,然后在div元素内插入四个img元素,如下图所示:

第三步,使用样式设置div下的每个img透明度、优先级和旋转角度,如下图所示:

第四步,保存代码并预览该静态页面,查看页面效果,可以看到图片发生旋转,如下图所示:

第五步,将旋转属性值由rotate换成了skew,这时查看下这个属性的效果,如下图所示:

第六步,保存代码并预览页面,分别查看界面展示图片的位置和形状,如下图所示: