CSS3 요소의 플립 코드는 무엇입니까

WBOY
풀어 주다: 2021-12-15 11:57:40
원래의
1537명이 탐색했습니다.

코드: 1. "transform:rotateY(angle)", Y축을 따라 요소의 뒤집기 스타일을 설정할 수 있습니다. 2. "transform:rotateX(angle)", Y축을 따라 요소의 뒤집기 스타일을 설정할 수 있습니다. 3. "transform:rotateZ (angle)", Z축을 따라 요소의 뒤집기 스타일을 설정할 수 있습니다.

CSS3 요소의 플립 코드는 무엇입니까

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS3 요소의 플립 코드는 무엇입니까

CSS에서 요소의 반전 효과를 얻으려면 변환 속성을 사용해야 합니다.

Transform 속성은 다양한 기능과 함께 사용될 때 다양한 플립 디스플레이 효과를 생성합니다.

1.rotateY() 함수와 함께 변환 속성을 사용하여 요소가 Y축을 따라 뒤집히도록 설정합니다.

예제는 다음과 같습니다.

      Document  
  CSS3 요소의 플립 코드는 무엇입니까 

上面是沿着Y轴翻转180度,下面是原图

CSS3 요소의 플립 코드는 무엇입니까
로그인 후 복사

출력 결과:

CSS3 요소의 플립 코드는 무엇입니까

2 변환 속성은rotateX() 함수와 협력하여 요소가 X축을 따라 뒤집히도록 설정합니다.

예제는 다음과 같습니다.

      Document  
  CSS3 요소의 플립 코드는 무엇입니까 

上面是沿着X轴翻转180度,下面是原图

CSS3 요소의 플립 코드는 무엇입니까
로그인 후 복사

출력 결과:

CSS3 요소의 플립 코드는 무엇입니까

3 변환 속성은rotateZ() 함수와 협력하여 요소가 Z축을 따라 뒤집히도록 설정합니다.

예제는 다음과 같습니다.

      Document  
  CSS3 요소의 플립 코드는 무엇입니까 

上面是沿着X轴翻转180度,下面是原图

CSS3 요소의 플립 코드는 무엇입니까
로그인 후 복사

출력 결과:

CSS3 요소의 플립 코드는 무엇입니까

(학습 영상 공유:css 영상 튜토리얼)

위 내용은 CSS3 요소의 플립 코드는 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
css
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!