那些遇到过的问题

CSS中如何围绕另一个旋转对象旋转一个对象？

Tri*_*ing 7 html javascript css

我有这两个旋转物体，我希望.box它们像环和地球一样旋转.circle，但我似乎不知道该怎么做，我还想将图像分布在空间周围（如图像发布而不是字母它的图像.box）如果可能的话我真的很感激。

提前致谢！ 这个图片

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #000;
}
.circle {
    transform-style: preserve-3d;
    transform: perspective(1000px) rotateY(360deg) rotateX(15deg);
    /* animation: animate 8s linear infinite; */
}
.circle span {
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    color: blueviolet;
    font-size: 3em;
    transform-origin: center;
    transform-style: preserve-3d;
    padding: 5px 11px;
    border-top: 4px solid blueviolet;
    border-bottom: 4px solid blueviolet;
    transform: rotateY(calc(var(--i) * calc(360deg/30))) translateZ(250px);
}
.box {
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    transform: perspective(1000px) rotateY(3600deg);
    /* animation: animate 200s linear infinite; */
}
@keyframes animate {
    0% {
        transform: perspective(1000px) rotateY(0deg);
    }
    100% {
        transform: perspective(1000px) rotateY(3600deg);
    }
}
.box span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: center;
    transform-style: preserve-3d;
    transform: rotateY(calc(var(--i) * 45deg)) translateZ(400px);
}
.box span img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
Run Code Online (Sandbox Code Playgroud) 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/try.css">
</head>
<body>
    <div class="box">
        <span style="--i:1"><img src="assets/try.png"></span>
        <span style="--i:2"><img src="assets/try.png"></span>
        <span style="--i:3"><img src="assets/try.png"></span>
        <span style="--i:4"><img src="assets/try.png"></span>
        <span style="--i:5"><img src="assets/try.png"></span>
        <span style="--i:6"><img src="assets/try.png"></span>
        <span style="--i:7"><img src="assets/try.png"></span>
        <span style="--i:8"><img src="assets/try.png"></span>
    </div>
    <div class="circle">
        <span style="--i:1;">a</span>
        <span style="--i:2;">a</span>
        <span style="--i:3;">a</span>
        <span style="--i:4;">a</span>
        <span style="--i:5;">a</span>
        <span style="--i:6;">a</span>
        <span style="--i:7;">a</span>
        <span style="--i:8;">a</span>
        <span style="--i:9;">a</span>
        <span style="--i:10;">a</span>
        <span style="--i:11;">a</span>
        <span style="--i:12;">a</span>
        <span style="--i:13;">a</span>
        <span style="--i:14;">a</span>
        <span style="--i:15;">a</span>
        <span style="--i:16;">a</span>
        <span style="--i:17;">a</span>
        <span style="--i:18;">a</span>
        <span style="--i:19;">a</span>
        <span style="--i:20;">a</span>
        <span style="--i:21;">a</span>
        <span style="--i:22;">a</span>
        <span style="--i:23;">a</span>
        <span style="--i:24;">a</span>
        <span style="--i:25;">a</span>
        <span style="--i:26;">a</span>
        <span style="--i:27;">a</span>
        <span style="--i:28;">a</span>
        <span style="--i:29;">a</span>
        <span style="--i:30;">a</span>
    </div>
    <script>
        let circle = document.querySelector('.circle');
        let box = document.querySelector('.box');

        window.onmousemove = function (e) {
            let x = e.clientX;
            let y = e.clientX;

            circle.style.transform = `perspective(1000px) rotateY(${x * 0.5}deg) rotateX(15deg)`;
            box.style.transform = `perspective(1000px) rotateY(${y}deg)`; // Adjust rotation speed
        };
    </script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

Vin*_*mar 4

您可以使用scale3d() css函数并获得相同的输出。

      let circle = document.querySelector(".circle");
      let box = document.querySelector(".box");

      window.onmousemove = function (e) {
        let x = e.clientX;
        let y = e.clientX;

        circle.style.transform = `perspective(1000px) rotateY(${
          x * 0.5
        }deg) rotateX(15deg)`;
        box.style.transform = `perspective(1000px) rotateY(${y}deg)`; // Adjust rotation speed
      };
Run Code Online (Sandbox Code Playgroud) 
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #000;
}
.circle {
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateY(360deg) rotateX(15deg);
  /* animation: animate 60s linear infinite; */
}
.circle span {
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  color: blueviolet;
  font-size: 3em;
  transform-origin: center;
  transform-style: preserve-3d;
  padding: 5px 11px;
  border-top: 4px solid blueviolet;
  border-bottom: 4px solid blueviolet;
  transform: rotateY(calc(var(--i) * calc(360deg / 30))) translateZ(250px);
}
.box {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateY(3600deg) scale3d(2.5, 2.5, 2.5);
  animation: animate2 200s linear infinite;
}
@keyframes animate {
  0% {
    transform: perspective(1000px) rotateY(0deg);
  }
  100% {
    transform: perspective(1000px) rotateY(3600deg);
  }
}
@keyframes animate2 {
  0% {
    transform: perspective(1000px) rotateY(0deg) scale3d(2.5, 2.5, 2.5);
  }
  100% {
    transform: perspective(1000px) rotateY(3600deg) scale3d(2.5, 2.5, 2.5);
  }
}
.box span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: center;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--i) * 45deg)) translateZ(400px);
}
.box span img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
Run Code Online (Sandbox Code Playgroud) 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/try.css" />
  </head>
  <body>
    <div class="box">
      <span style="--i: 1"><img src="https://cdn-icons-png.flaticon.com/512/2626/2626299.png" /></span>
      <span style="--i: 2"><img src="https://cdn-icons-png.flaticon.com/512/2626/2626299.png" /></span>
      <span style="--i: 3"><img src="https://cdn-icons-png.flaticon.com/512/2626/2626299.png" /></span>
      <span style="--i: 4"><img src="https://cdn-icons-png.flaticon.com/512/2626/2626299.png" /></span>
      <span style="--i: 5"><img src="https://cdn-icons-png.flaticon.com/512/2626/2626299.png" /></span>
      <span style="--i: 6"><img src="https://cdn-icons-png.flaticon.com/512/2626/2626299.png" /></span>
      <span style="--i: 7"><img src="https://cdn-icons-png.flaticon.com/512/2626/2626299.png" /></span>
      <span style="--i: 8"><img src="https://cdn-icons-png.flaticon.com/512/2626/2626299.png" /></span>
    </div>
    <div class="circle">
      <span style="--i: 1">a</span>
      <span style="--i: 2">a</span>
      <span style="--i: 3">a</span>
      <span style="--i: 4">a</span>
      <span style="--i: 5">a</span>
      <span style="--i: 6">a</span>
      <span style="--i: 7">a</span>
      <span style="--i: 8">a</span>
      <span style="--i: 9">a</span>
      <span style="--i: 10">a</span>
      <span style="--i: 11">a</span>
      <span style="--i: 12">a</span>
      <span style="--i: 13">a</span>
      <span style="--i: 14">a</span>
      <span style="--i: 15">a</span>
      <span style="--i: 16">a</span>
      <span style="--i: 17">a</span>
      <span style="--i: 18">a</span>
      <span style="--i: 19">a</span>
      <span style="--i: 20">a</span>
      <span style="--i: 21">a</span>
      <span style="--i: 22">a</span>
      <span style="--i: 23">a</span>
      <span style="--i: 24">a</span>
      <span style="--i: 25">a</span>
      <span style="--i: 26">a</span>
      <span style="--i: 27">a</span>
      <span style="--i: 28">a</span>
      <span style="--i: 29">a</span>
      <span style="--i: 30">a</span>
    </div>
  </body>
</html>
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

290 次

最近记录：

2 年，4 月 前
相关归档
如何在Javascript中声明可选的函数参数？ 289
如何在jquery中设置背景颜色 116
如何异步加载CSS 62
获取数据属性jquery vs javascript 50
Javascript中循环引用的示例？ 46
向表格主体添加滚动条 40
如何获取javaScript事件源元素？ 33
如何在div中定位绝对？ 32
jQuery .click函数无法处理<td>标签？ 25
HTML <head>最佳做法 24
难疑归档
浮点数学是否破碎？ 2798
如何让Git使用我选择的编辑器进行提交？ 2362
在jQuery中添加表行 2331
什么是三法则？ 2067
动态创建元素的事件绑定？ 1677
如何检查字符串是否为数字(浮点数)？ 1519
如何为"选择"框创建占位符？ 1426
静态只读与const 1349
window.onload vs $(document).ready() 1205
网格布局上的手势检测 1076