千家信息网

css中的transform-origin属性怎么用

发表于:2025-02-02 作者:千家信息网编辑
千家信息网最后更新 2025年02月02日,小编给大家分享一下css中的transform-origin属性怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!CSS
千家信息网最后更新 2025年02月02日css中的transform-origin属性怎么用

小编给大家分享一下css中的transform-origin属性怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

  CSS3transform-origin属性

  作用:transform-origin属性允许您改变被转换元素的位置。2D转换元素能够改变元素x和y轴。3D转换元素还能改变其Z轴。

  语法:

  transform-origin:x-axisy-axisz-axis;

  值

  描述

  x-axis

  定义视图被置于X轴的何处。可能的值:

  ●left

  ●center

  ●right

  ●length

  ●%

  y-axis

  定义视图被置于Y轴的何处。可能的值:

  ●top

  ●center

  ●bottom

  ●length

  ●%

  z-axis 定义视图被置于Z轴的何处。可能的值:length

  注:该属性必须与transform属性一同使用。

  CSS3transform-origin属性的使用示例

  

  

  

  

  

  

  

  

旋转红色的DIV元素,尝试更改其X轴和Y轴:

  

  HELLO

  

  Rotate:

  

  transform:rotateY:(45deg);

  

  X-axis:

  Y-axis:

  transform-origin:20%40%;

  

  


以上是"css中的transform-origin属性怎么用"这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!

0