I have these two rotating objects and I want the .box to be rotating around the .circle like the ring and the earth but I can't seem to figure out how to do it, I would also like to distribute the images around the space (like the image posted instead of the alphabets it the .box images) if possible I would really appreciate it.
Thanks in advance! 
* {
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;
}<!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>from How to rotate an object around another rotating object in CSS?
No comments:
Post a Comment