资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

css3动画如何设置旋转参考点

这篇“css3动画如何设置旋转参考点”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“css3动画如何设置旋转参考点”文章吧。

创新互联建站-专业网站定制、快速模板网站建设、高性价比汕城网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式汕城网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖汕城地区。费用合理售后完善,十余年实体公司更值得信赖。

在css3中,可以利用“transform-origin”属性设置元素的旋转参考点,该属性用于更改元素旋转的位置,如果是2D旋转元素可以改变元素在x和y轴的位置,如果是3D旋转元素则可以改变元素在x轴、y轴以及z轴的位置,语法为“transform-origin:X轴方向位置 Y轴方向位置 Z轴方向位置;”。

本教程操作环境:windows10系统、CSS3&&HTML5版本、Dell G3电脑。

css3动画设置旋转参考点

用transform-Origin属性设置旋转参考点

transform-Origin属性允许您更改转换元素的位置。

2D转换元素可以改变元素的X和Y轴。 3D转换元素,还可以更改元素的Z轴。

使用此属性必须先使用 transform 属性。

语法为:

transform-origin: x-axis y-axis z-axis;

x-axis

定义视图被置于 X 轴的何处。

y-axis

定义视图被置于 Y 轴的何处。

z-axis

定义视图被置于 Z 轴的何处。

示例如下:





  HELLO

输出结果:

css3动画如何设置旋转参考点

以上就是关于“css3动画如何设置旋转参考点”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。


网页名称:css3动画如何设置旋转参考点
网页地址:http://www.cdkjz.cn/article/ipsihs.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220