변환합니다
완벽한 직사각형처럼 보이는 모든 것에 지치셨나요? Transform 확장 기능은 모든 Elementor 위젯이나 Elements 를 비틀고,기울이고, 모양을 바꿀 수 있는 힘을 제공합니다. 사용후기 카드에 미묘한 스큐를 추가하거나,극적인 효과를 위해 헤드라인을 회전하거나,호버에서 이미지를 정밀하게 확장할 수 있습니다. – 모두 간단한 시각적 컨트롤을 통해 표준 템플릿 룩에서 돋보이는 날카롭고 역동적이며 진정으로 독특한 레이아웃을 만들기 위한 비밀 도구입니다. 기본 포지셔닝을 뛰어넘어 요소에 새로운 차원을 부여하세요.
X & Y 축에서 기울고 회전합니다
요소를 기울이거나 기울이거나 원근감 있게 보이게 합니다. Skew X 및 Skew Y 값을 독립적으로 제어하여 평행사변형 모양 또는 동적 경사를 만듭니다. 이를 Rotate 와 결합하여 2D 또는 3D 공간에서 요소를 회전시켜 일반적인 웹 디자인의 견고한 수평 정렬을 깨뜨립니다.
- 동적 기울기: 기울기 X를 적용하여 컨테이너가 앞으로 또는 뒤로 기울어지는 것처럼 보이게 합니다.
- 정밀 회전: 창의적인 레이아웃과 겹치는 디자인을 위해 요소를 정밀한 각도로 회전합니다.
- 효과 결합: 버튼을 꼬집은 다음 약간 회전하여 장난스럽고 색다른 클릭 유도 문구를 만듭니다.
호버링 시 성장, 축소 및 깊이 추가
방문자에게 반응하는 인터랙티브한 순간을 만들어 보세요. Scale 속성을 사용하여 아이콘이나 이미지가 호버링 시 커지도록 만들어 눈을 그려보세요. 부모 컨테이너에 Perspective 를 추가하여 자식 요소가 3D 공간에서 회전하게 만들어 평면 디자인이 따라올 수 없는 깊이감과 몰입감을 만들어 보세요.
- 호버 기반 스케일링: 호버 상태를 스케일: 1.1 로 설정하여 버튼이나 카드에 부드럽고 매력적인 성장 효과를 줍니다.
- 3D-Like Depth: Perspective 설정을 사용하여 회전된 여러 요소가 통합된 3D 장면의 일부처럼 느껴지도록 합니다.
- 원점 제어: 원점 변환을 변경하여 원소의 중심, 위쪽 또는 모서리에서 요소 눈금을 만듭니다.
변형을 위해 자주 묻는 질문
내 텍스트를 왜곡하거나 회전하면 읽기 어려워지나요?
배 밖으로 나가면 가능합니다. 핵심은 미묘함입니다. 약간의 2-5 도 회전이나 기울어짐은 가독성을 손상시키지 않으면서 시각적으로 큰 흥미를 더할 수 있습니다. 항상 다른 장치에서 미리보고 테스트하십시오. 중요한 본문 텍스트의 경우 변형을 최소화하거나 장식 요소에만 적용하는 것이 가장 좋습니다.
이걸로 3D 플립카드를 만들 수 있나요?
아주 가까이 다가갈 수 있습니다! 부모 컨테이너의 Perspective 와 Rotate Y (for the flip) 를 결합하면 뒤집어지는 것처럼 보이는 카드를 만들 수 있습니다. 두 가지 요소 (front and back) 를 사용하고 완전한 솔루션을 위해 더 발전된 상호 작용 또는 사용자 정의 코드로 가시성을 전환합니다.
이러한 효과가 모바일 장치에서 작동합니까?
사용되는 CSS 변환은 최신 모바일 브라우저에서 널리 지원됩니다. 그러나 복잡한 3D 관점이나 강렬한 애니메이션이 데스크톱에서 더 잘 수행 될 수 있습니다. 실제 전화에서 디자인을 확인하고 필요한 경우 모바일 효과를 단순화하는 것이 항상 좋습니다.
Floating Effects 확장과 어떻게 다른가요?
훌륭한 질문입니다! 부동 효과는 자동 연속 애니메이션 (튀거나 표류하는 동작과 같은) 을 위한 것입니다. 변환 확장은 요소의 핵심 모양과 위치 (비뚤어짐,회전, 축척) 를 변경하는 것으로,종종 정적인 방식으로 또는 일회성 상호 작용 (호버 효과와 같은) 으로 함께 사용할 수 있습니다! 예를 들어 약간 비뚤어진 (변형) 카드와 부드럽게 펄스 (부동 효과) 를 가질 수 있습니다.
트렌드 엘리먼트 위젯 및 확장
더 짧은 시간에 정교한 웹사이트를 구축하세요.
