CSS3 transform-origin 属性

最新推荐文章于 2025-10-17 18:32:25 发布

原创最新推荐文章于 2025-10-17 18:32:25 发布 · 162 阅读

0 ·

CC 4.0 BY-SA版权

CSS3 专栏收录该内容

2 篇文章

订阅专栏

本文详细解析了 CSS 中 transform-origin 属性的功能及使用方法，包括如何定义旋转原点的位置，特别是当使用百分比和像素单位时的区别。通过具体实例展示了如何在网页布局中精确控制元素的旋转。

<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
  position: relative;
  height: 200px;
  width: 200px;
  margin: 100px;
  border: 1px solid black;
}
    #div2
{
  width:10px;
  height:10px;
  position: absolute;
  border: 1px solid black;
  background-color: red;
  transform: rotate(45deg);
  transform-origin:0 200px;
  -ms-transform: rotate(45deg); /* IE 9 */
  -ms-transform-origin:0 200px; /* IE 9 */
  -webkit-transform: rotate(45deg); /* Safari and Chrome */
  -webkit-transform-origin:0 200px; /* Safari and Chrome */
}
  </style>
</head>
<body>
<div id="div1">
  <div id="div2"></div>
</div>
</body>
</html>
//运行结果是：
transform-origin:如果以百分比定义原点那么就是以子集本身宽度的百分比而定义的位置，如果是以
像素单位定义的原点，那么就是以其父级元素为基准点而定义的原点。