成都网站建设设计

将想法与焦点和您一起共享

css3怎样设置旋转点位置

在css中,可以利用“transform-Origin”属性设置元素旋转点的位置,该属性允许更改转换元素的位置,可以分别设置元素转换后与X、Y和Z轴之间的位置,语法为“transform-origin:X轴方向 Y轴方向 Z轴方向;”。

创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站设计、成都网站制作、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的清江浦网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

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

css3怎样设置旋转点位置

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

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

在没有设置过transform-origin属性时,CSS变形进行的旋转、移位、缩放等操作都是以元素自己中心(变形原点/中心点)位置进行变形的。而CSS3 中的transform-origin属性用于设置旋转元素的基点位置,熟悉使用transform-origin并结合CSS3动画可以使元素沿着某一基点进行旋转,位移等。

示例如下:

123
HELLO

输出结果:

(学习视频分享:css视频教程)


本文名称:css3怎样设置旋转点位置
文章出自:http://chengdu.cdxwcx.cn/article/cgjohd.html