Компонент React/NextJS для перемещения изображений, сохраняя их вертикальное положение (CSS или Framer Motion) ⇐ CSS

[Anonymous]

У меня есть компонент реагирования, который отображает 4 изображения на севере, востоке, западе, юге и западе. При щелчке по любому из изображений контейнер поворачивается на одну позицию, поэтому изображение севера становится изображением востока, а восток становится изображением, расположенным на юге, и т. д. Это работает правильно, однако проблема в том, что когда изображения поворачиваются, они больше не находятся в вертикальное положение, что имеет смысл, поскольку вращается контейнер, в котором они содержатся. Мне нужно, чтобы выполнялась та же функциональность, но при вращении контейнера изображения также вращаются в противоположном направлении, чтобы сохранить свое вертикальное положение. Цель состоит в том, чтобы при вращении контейнера изображения вращались с одинаковой скоростью и сглаживанием.
Я пытался использовать ChatGPT, но, похоже, ему трудно понять мои подсказки, какими бы конкретными они ни были. Я объясняю ситуацию. Я добавил Framer Motion, и при изменении состояния я могу вращать изображения, однако это нарушает макет. Ниже мой .css и компонент реагирования. Я тот, кто может помочь мне решить эту проблему.
CSS
.circle {
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
border-radius: 50%;
transition: transform 1s ease;
}

.circle-image {
position: absolute;
width: 100px;
height: 100px;
}

.north {
top: 0;
left: 50%;
transform: translateX(-50%);
}

.south {
bottom: 0;
left: 50%;
transform: translateX(-50%);
}

.east {
top: 50%;
right: 0;
transform: translateY(-50%);
}

.west {
top: 50%;
left: 0;
transform: translateY(-50%);
}

Код компонента React:
'use client';
import northImage from '@/public/images/jobs.png'; // Import your images here
import southImage from '@/public/images/moving.png';
import eastImage from '@/public/images/car.png';
import westImage from '@/public/images/computer.png';
import Image from 'next/image';
import { motion } from 'framer-motion';
import { useState } from 'react';

const RotatingCircle = () => {
const [rotation, setRotation] = useState(0);
const [isActive, setIsActive] = useState(0);

const handleClick = () => {
setRotation(rotation + 90); // Rotate by 90 degrees clockwise
setIsActive((prevState) => prevState - 90);
};

return (










);
};

export default RotatingCircle;


Подробнее здесь: https://stackoverflow.com/questions/786 ... sition-css