css-transform-origin perspective-origin-1.1

最新推荐文章于 2024-07-07 13:22:35 发布

彩舒

最新推荐文章于 2024-07-07 13:22:35 发布

阅读量312

点赞数

CC 4.0 BY-SA版权

分类专栏：前端技术文章标签： transform-origin perspective-origin css

本文链接：https://blog.youkuaiyun.com/caishu1995/article/details/82252576

前端技术专栏收录该内容

105 篇文章

订阅专栏

博客介绍了CSS中的transform-origin和perspective-origin属性。transform-origin可改变被转换元素的位置，perspective-origin能改变被转换元素的3D基点位置，但目前浏览器大多不支持该属性，Chrome和Safari支持替代的-webkit-perspecitve-origin属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

transform-origin 属性

允许您改变被转换元素的位置。

/*如果变形的过程中，希望设置变形的原点，则设置origin*/
transform-origin: 0 0;
-ms-transform-origin: 0 0; 		/* IE 9 */
-webkit-transform-origin: 0 0;	/* Safari 和 Chrome */
-moz-transform-origin: 0 0;		/* Firefox */
-o-transform-origin: 0 0;		/* Opera */

perspective-origin 属性

允许改变被转换元素的3D基点位置。

目前浏览器都不支持该属性。Chrome和Safari支持替代的-webkit-perspecitve-origin属性。

perspective-origin: 10% 10%;
-webkit-perspective-origin: 10% 10%;    /* Safari 和 Chrome */