Witam
Potrzebuję utworzyć kompletną figurę, żeby bokami się stykały kwadraty żeby się obracały jak sześcian.
Teraz się obraca ale boki się nie stykają.
Prawy róg mniejszczego kwadratu powinien mieć koniec na lewym rogu dużego.
Co tu zmienić?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG 3D Rotation</title>
<style>
body, html {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
}
svg {
border: 1px solid #000;
}
</style>
</head>
<body>
<svg style="position:absolute;top:0vh;" width="400" height="400" viewBox="-200 -200 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color: red;" />
<stop offset="100%" style="stop-color: blue;" />
</linearGradient>
</defs>
<rect id="myRect" width="100" height="100" fill="url(#gradient)"/>
</svg>
<svg style="position:absolute;top:10vh;" width="400" height="400" viewBox="-200 -200 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color: red;" />
<stop offset="100%" style="stop-color: blue;" />
</linearGradient>
</defs>
<rect id="myRect2" width="20" height="100" fill="url(#gradient)"/>
</svg>
<script>
// Get the SVG rect element
const rect = document.getElementById('myRect');
const rect2 = document.getElementById('myRect2');
// Define rotation angles
let rotationX = 0;
let rotationY = 0;
let rotationZ = 0;
// Set interval to rotate the SVG object
setInterval(() => {
// Increment rotation angles
rotationX += 1;
rotationY += 1;
rotationZ += 1;
// Apply 3D rotation using CSS transform property
rect.style.transform = `translate(-50%, -50%) rotateX(${rotationX}deg) rotateY(${rotationY}deg) rotateZ(${rotationZ}deg)`;
rect2.style.transform = `translate(-50%, -50%) rotateX(${rotationX}deg) rotateY(${rotationY}deg) rotateZ(${rotationZ}deg)`;
}, 20); // Rotate every 50 milliseconds*
</script>
</body>
</html>