[分享]css3怎么找原点坐标

CSS3是网页设计中很重要的一部分，我们经常需要对元素进行定位。在定位之前，我们需要找到元素的原点坐标。下面介绍一些找原点坐标的方法。 /先定义一个父元素/ .container{ :relative...

CSS3是网页设计中很重要的一部分，我们经常需要对元素进行定位。在定位之前，我们需要找到元素的原点坐标。下面介绍一些找原点坐标的方法。

<style>
  /*先定义一个父元素*/
  .container{
    position:relative;
    height:200px;
    width:300px;
    border:1px solid #000;
  }
  /*再定义一个子元素*/
  .child{
    position:absolute;
    height:50px;
    width:100px;
    background-color:red;
  }
</style>

<div class="container">
  <div class="child"></div>
</div> 

以上是一个简单的CSS结构，我们在子元素上添加一些样式来进行定位。

.child{
  /*向左移动50px*/
  left:50px;
  /*向上移动50px*/
  top:50px;
  /*设置原点坐标*/
  transform-origin:0 0;
  /*旋转30度*/
  transform:rotate(30deg);
} 

以上代码的作用是将子元素沿着原点坐标向左上角移动50px，然后再以原点坐标为中心旋转30度。接下来，我们需要知道子元素的原点坐标，代码如下：

<script>
  var childElement = document.querySelector('.child');
  console.log(childElement.getBoundingClientRect());
</script> 

以上代码将获取子元素的原点坐标，输出结果如下：

{
  left: 50,
  top: 50,
  right: 150,
  bottom: 100,
  width: 100,
  height: 50
} 

通过以上代码，我们可以得到子元素的原点坐标为(50,50)。

总结：通过以上方法，我们可以找到元素在页面中的具体位置，从而进行定位等操作。需要注意的是，如果元素进行了旋转等变换操作，我们需要同时设置transform-origin属性来重新定义原点坐标。