css3动画如何设置旋转参考点-古蔺大橙子建站
RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间:8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
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://scgulin.cn/article/ipsihs.html