如何使用变换原点居中旋转 div？答案

【问题标题】：How to center rotating div with transform-origin?如何使用变换原点居中旋转 div？
【发布时间】：2017-09-24 10:06:34
【问题描述】：

我忙了很长时间试图让我的时钟居中。
我怎样才能将所有旋转的class=pointer 居中在clock 的中间？
无论我尝试什么，它总是偏离中心一点点。永远不会完全居中。

请有人救救我！

const elHrs = document.getElementById('hours'),
elMin = document.getElementById('mins'),
elSec = document.getElementById('secs');


(function clock() {
    const date = new Date(),
    secs = date.getSeconds(),
    mins = date.getMinutes(),
    hrs = date.getHours();
    
    const degHrs = ((hrs / 12) * 360);
    const degSec = ((secs / 60) * 360);

    if(degSec >= 354 || degSec <= 6) {
        elSec.style.transitionDuration = "0.01s";
    } else {
        elSec.style.transitionDuration = "0.4s";
    }

    const degMin = ((mins / 60) * 360);

    if(degMin >= 354 || degMin <= 6) {
        elMin.style.transitionDuration = "0.01s";
    } else {
        elMin.style.transitionDuration = "0.4s";
    }

    elSec.style.transform = `rotate(${degSec}deg)`;
    elMin.style.transform = `rotate(${degMin}deg)`;
    elHrs.style.transform = `rotate(${degHrs}deg)`;

    return setTimeout(clock, 500);
})()

html {
  box-sizing: border-box; }

*,
*:before,
*:after {
  box-sizing: inherit; }

html {
  background: black url(http://unsplash.it/1500/1000?image=721&blur=50);
  background-size: cover;
  color: white; }

body {
  margin: 0; }

.root {
  display: flex;
  flex-direction: column;
  min-height: 100vh; }

section {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center; }
  section span {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0 2px;
    border-radius: 50%;
    background-color: red; }

section h1 {
  width: 100%; }

.clock {
  position: relative;
  width: 20rem;
  height: 20rem;
  border-radius: 50%;
  border: 5px solid red; }

.clock:after {
  border-radius: 50%;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 5%;
  height: 5%;
  z-index: 10;
  background: #000; }

.pointer {
  position: absolute;
  width: 40%;
  height: 5%;
  background-color: white;
  transform-origin: 100%; }

footer {
  text-align: center;
  padding: 10px; }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>
    <div class="root">

        <section>
            <h1>A <span></span> Simple <span></span> Clock </h1>
            <div class="clock">
                <div class="pointer" id="secs"></div>
                <div class="pointer" id="mins"></div>
                <div class="pointer" id="hours"></div>
            </div>
        </section>

        <footer> footer</footer>
    </div>

    <script src="js/main.js"></script>
</body>

</html>

【问题讨论】：

标签： css css-transforms

【解决方案1】：

您可以为.pointer添加位置属性：

const elHrs = document.getElementById('hours'),
  elMin = document.getElementById('mins'),
  elSec = document.getElementById('secs');


(function clock() {
  const date = new Date(),
    secs = date.getSeconds(),
    mins = date.getMinutes(),
    hrs = date.getHours();

  const degHrs = ((hrs / 12) * 360);
  const degSec = ((secs / 60) * 360);

  if (degSec >= 354 || degSec <= 6) {
    elSec.style.transitionDuration = "0.01s";
  } else {
    elSec.style.transitionDuration = "0.4s";
  }

  const degMin = ((mins / 60) * 360);

  if (degMin >= 354 || degMin <= 6) {
    elMin.style.transitionDuration = "0.01s";
  } else {
    elMin.style.transitionDuration = "0.4s";
  }

  elSec.style.transform = `rotate(${degSec}deg)`;
  elMin.style.transform = `rotate(${degMin}deg)`;
  elHrs.style.transform = `rotate(${degHrs}deg)`;

  return setTimeout(clock, 500);
})()

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

html {
  background: black url(http://unsplash.it/1500/1000?image=721&blur=50);
  background-size: cover;
  color: white;
}

body {
  margin: 0;
}

.root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

section {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

section span {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0 2px;
  border-radius: 50%;
  background-color: red;
}

section h1 {
  width: 100%;
}

.clock {
  position: relative;
  width: 20rem;
  height: 20rem;
  border-radius: 50%;
  border: 5px solid red;
}

.clock:after {
  border-radius: 50%;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 5%;
  height: 5%;
  z-index: 10;
  background: #000;
}

.pointer {
  position: absolute;
  width: 40%;
  height: 5%;
  background-color: white;
  transform-origin: 100%;
  top: 47.5%;
  right: 50%;
}

footer {
  text-align: center;
  padding: 10px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>
  <div class="root">

    <section>
      <h1>A <span></span> Simple <span></span> Clock </h1>
      <div class="clock">
        <div class="pointer" id="secs"></div>
        <div class="pointer" id="mins"></div>
        <div class="pointer" id="hours"></div>
      </div>
    </section>

    <footer> footer</footer>
  </div>

  <script src="js/main.js"></script>
</body>

</html>

【讨论】：

谢谢，这可行，但有没有办法在不手动计算百分比的情况下做到这一点？
@Hyrule 没有它我似乎无法找到出路，还有很多事情要做......

【解决方案2】：

尝试改变

.pointer {
    position: absolute;
    width: 40%;
    height: 5%;
    background-color: white;
    transform-origin: 100%;
    top: 47%;
    left: 10%;
}

这应该适用于您的原始代码。

【讨论】：

【解决方案3】：

我将时钟包装在一个 div 中，然后将时钟样式应用于 clockWrapper 并设置时钟边距。

.clockWrapper {
  position: relative;
  width: 20rem;
  height: 20rem;
  border-radius: 50%;
  border: 5px solid red; }
.clock{
  margin-top: 147px;
  margin-left: 33px;
}

const elHrs = document.getElementById('hours'),
  elMin = document.getElementById('mins'),
  elSec = document.getElementById('secs');


(function clock() {
  const date = new Date(),
    secs = date.getSeconds(),
    mins = date.getMinutes(),
    hrs = date.getHours();

  const degHrs = ((hrs / 12) * 360);
  const degSec = ((secs / 60) * 360);

  if (degSec >= 354 || degSec <= 6) {
    elSec.style.transitionDuration = "0.01s";
  } else {
    elSec.style.transitionDuration = "0.4s";
  }

  const degMin = ((mins / 60) * 360);

  if (degMin >= 354 || degMin <= 6) {
    elMin.style.transitionDuration = "0.01s";
  } else {
    elMin.style.transitionDuration = "0.4s";
  }

  elSec.style.transform = `rotate(${degSec}deg) `;
  elMin.style.transform = `rotate(${degMin}deg)`;
  elHrs.style.transform = `rotate(${degHrs}deg)`;

  return setTimeout(clock, 500);
})()

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

html {
  background: black url(http://unsplash.it/1500/1000?image=721&blur=50);
  background-size: cover;
  color: white;
}

body {
  margin: 0;
}

.root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

section {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

section span {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0 2px;
  border-radius: 50%;
  background-color: red;
}

section h1 {
  width: 100%;
}

.clockWrapper {
  position: relative;
  width: 20rem;
  height: 20rem;
  border-radius: 50%;
  border: 5px solid red;
}

.clock {
    margin-top: 147px;
    margin-left: 33px;
}

.clock:after {
  border-radius: 50%;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 5%;
  height: 5%;
  z-index: 10;
  background: #000;
}

.pointer {
  position: absolute;
  width: 40%;
  height: 5%;
  background-color: white;
  transform-origin: 100%;
}

footer {
  text-align: center;
  padding: 10px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>
  <div class="root">

    <section>
      <h1>A <span></span> Simple <span></span> Clock </h1>
      <div class="clockWrapper">
        <div class="clock">
          <div class="pointer" id="secs"></div>
          <div class="pointer" id="mins"></div>
          <div class="pointer" id="hours"></div>
        </div>
      </div>
    </section>

    <footer> footer</footer>
  </div>

  <script src="js/main.js"></script>
</body>

</html>

【讨论】：