Rotate Transition

보통

회전하며 나타나고 사라지는 전환 효과

#transition#rotate#smooth

라이브 데모

🔄

Rotate Transition

회전하며 나타나고 사라지는 효과

코드

RotateTransition.tsx

export const RotateTransition = () => {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <div className={`rotate-transition ${isVisible ? 'rotate-transition-visible' : ''}`}>
      <div className="transition-content">
        <h3>Rotate Transition</h3>
      </div>
    </div>
  );
};

transitions.css

.rotate-transition {
  transform: rotate(180deg);
  opacity: 0;
  transition: all 0.5s ease;
}

.rotate-transition-visible {
  transform: rotate(0deg);
  opacity: 1;
}