<div class="card">
<div class="content">
<svg viewBox="-500 -500 1000 1000">
<circle r="450"></circle>
<circle class="equator" r="450"></circle>
<circle class="meridian" r="450"></circle>
<circle class="meridian" r="450"></circle>
<circle class="meridian" r="450"></circle>
<circle class="meridian" r="450"></circle>
<circle class="meridian" r="450"></circle>
<circle class="meridian" r="450"></circle>
<circle class="meridian" r="450"></circle>
<circle class="meridian" r="450"></circle>
<circle class="meridian" r="450"></circle>
<circle class="meridian" r="450"></circle>
<circle class="meridian" r="450"></circle>
<circle class="meridian" r="450"></circle>
</svg>
</div>
</div>
*{margin:0;padding:0;}
body {
background:#05070b;
}
.card {
overflow: hidden;
}
.content{
display: flex;
margin-top: 10vh;
justify-content: space-around;
}
svg{
height:400px;
width:400px;
overflow: hidden;
}
circle {
stroke: #ff002b;
stroke-width: 2px;
fill: none;
}
.equator {
-webkit-transform: rotateZ(-20deg) rotateX(125deg);
transform: rotateZ(-20deg) rotateX(125deg);
}
.meridian {
-webkit-animation: turn 0.5s infinite linear;
animation: turn 0.5s infinite linear;
}
.meridian:nth-child(1) {
--target: 180deg / $count * ($i + 1);
-webkit-transform: rotateZ(-20deg) rotateX(35deg) rotateY(15deg);
transform: rotateZ(-20deg) rotateX(35deg) rotateY(15deg);
}
.meridian:nth-child(2) {
--target: 180deg / $count * ($i + 1);
-webkit-transform: rotateZ(-20deg) rotateX(35deg) rotateY(30deg);
transform: rotateZ(-20deg) rotateX(35deg) rotateY(30deg);
}
.meridian:nth-child(3) {
--target: 180deg / $count * ($i + 1);
-webkit-transform: rotateZ(-20deg) rotateX(35deg) rotateY(45deg);
transform: rotateZ(-20deg) rotateX(35deg) rotateY(45deg);
}
.meridian:nth-child(4) {
--target: 180deg / $count * ($i + 1);
-webkit-transform: rotateZ(-20deg) rotateX(35deg) rotateY(60deg);
transform: rotateZ(-20deg) rotateX(35deg) rotateY(60deg);
}
.meridian:nth-child(5) {
--target: 180deg / $count * ($i + 1);
-webkit-transform: rotateZ(-20deg) rotateX(35deg) rotateY(75deg);
transform: rotateZ(-20deg) rotateX(35deg) rotateY(75deg);
}
.meridian:nth-child(6) {
--target: 180deg / $count * ($i + 1);
-webkit-transform: rotateZ(-20deg) rotateX(35deg) rotateY(90deg);
transform: rotateZ(-20deg) rotateX(35deg) rotateY(90deg);
}
.meridian:nth-child(7) {
--target: 180deg / $count * ($i + 1);
-webkit-transform: rotateZ(-20deg) rotateX(35deg) rotateY(105deg);
transform: rotateZ(-20deg) rotateX(35deg) rotateY(105deg);
}
.meridian:nth-child(8) {
--target: 180deg / $count * ($i + 1);
-webkit-transform: rotateZ(-20deg) rotateX(35deg) rotateY(120deg);
transform: rotateZ(-20deg) rotateX(35deg) rotateY(120deg);
}
.meridian:nth-child(9) {
--target: 180deg / $count * ($i + 1);
-webkit-transform: rotateZ(-20deg) rotateX(35deg) rotateY(135deg);
transform: rotateZ(-20deg) rotateX(35deg) rotateY(135deg);
}
.meridian:nth-child(10) {
--target: 180deg / $count * ($i + 1);
-webkit-transform: rotateZ(-20deg) rotateX(35deg) rotateY(150deg);
transform: rotateZ(-20deg) rotateX(35deg) rotateY(150deg);
}
.meridian:nth-child(11) {
--target: 180deg / $count * ($i + 1);
-webkit-transform: rotateZ(-20deg) rotateX(35deg) rotateY(165deg);
transform: rotateZ(-20deg) rotateX(35deg) rotateY(165deg);
}
.meridian:nth-child(12) {
--target: 180deg / $count * ($i + 1);
-webkit-transform: rotateZ(-20deg) rotateX(35deg) rotateY(180deg);
transform: rotateZ(-20deg) rotateX(35deg) rotateY(180deg);
}
.meridian:nth-child(13) {
--target: 180deg / $count * ($i + 1);
-webkit-transform: rotateZ(-20deg) rotateX(35deg) rotateY(195deg);
transform: rotateZ(-20deg) rotateX(35deg) rotateY(195deg);
}
.meridian:nth-child(14) {
--target: 180deg / $count * ($i + 1);
-webkit-transform: rotateZ(-20deg) rotateX(35deg) rotateY(210deg);
transform: rotateZ(-20deg) rotateX(35deg) rotateY(210deg);
}
// Thanks to Pavel Dobryakov //
const ANGLE = 40;
let card = document.querySelectorAll(".card");
card.forEach((element, i) => {
floatable(element);
});
function floatable (panel) {
let content = panel.querySelector(".content");
panel.addEventListener('mouseout', e => {
content.style.transform = `perspective(400px)
rotateX(0deg)
rotateY(0deg)
rotateZ(0deg)
translateZ(40px)`;
content.style.transition = `all 2s linear`;
});
panel.addEventListener('mousemove', e => {
let w = panel.clientWidth;
let h = panel.clientHeight;
let y = (e.offsetX - w * 0.5) / w * ANGLE;
let x = (1 - (e.offsetY - h * 0.5)) / h * ANGLE;
content.style.transform = `perspective(400px)
rotateX(${x}deg)
rotateY(${y}deg)`;
});
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.