CSS3에서 3차원 뒤집기 효과를 얻는 방법-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

CSS3에서 3차원 뒤집기 효과를 얻는 방법

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jan 24, 2022 pm 01:37 PM

css

CSS3에서는 회전3d(),rotateX(),rotateY()및rotateZ()함수와 함께 변환 속성을 사용하여 3차원 뒤집기 효과를 얻을 수 있습니다. 구문은 "transform:rotate3d(x,y, z, 각도)".

CSS3에서 3차원 뒤집기 효과를 얻는 방법

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

css3에서 3차원 뒤집기 효과를 얻는 방법

Transform 속성은 요소에 2D 또는 3D 변형을 적용합니다. 이 속성을 사용하면 요소를 회전, 크기 조정, 이동 또는 기울일 수 있습니다.

이 속성을 네 가지 함수인rotateX(),rotateY(),rotateZ(),rotate3d()와 함께 사용하면 3차원 뒤집기 효과를 얻을 수 있습니다.

X: 상자의 X축을 기준으로 아래에서 위로 회전
Y: 상자의 Y축을 기준으로 왼쪽에서 오른쪽으로 회전
Z: 상자의 중심을 기준으로 시계 방향으로 회전 상자를 원점으로

rotate3d(x,y,z,angle)의 값 설명:

x: 0과 1 사이의 값으로 주로 상자 주위를 회전하는 요소의 벡터 값을 설명하는 데 사용됩니다. X 축;
y: 0과 1 사이의 값으로 주로 Y 축을 중심으로 회전하는 요소의 벡터 값을 설명하는 데 사용됩니다.
z: 0과 1 사이의 값으로 주로 사용됩니다. Z 축을 중심으로 회전하는 요소 설명
a: 각도 값으로, 주로 3D 공간에서 요소의 회전 각도를 지정하는 데 사용됩니다. 값이 양수이면 요소가 시계 방향으로 회전합니다. , 그렇지 않으면 요소가 시계 반대 방향으로 회전합니다.

아래에 소개된 세 가지 회전 함수는 기능 면에서 동일합니다.

rotateX(a) 함수는 Rotate3d(1,0,0,a)와 동일합니다.
rotateY(a) 함수는 Rotate3d와 동일합니다. ( 0,1,0,a)
rotateZ(a) 함수는rotate3d(0,0,1,a)

예제는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
.img1{
transform:rotateX(180deg);
}
</style>
</head>
<body>
<img  class="img1 lazy"  src="/static/imghwm/default1.png"  data-src="1115.08.png"    alt="CSS3에서 3차원 뒤집기 효과를 얻는 방법" ><br>
<img  src="/static/imghwm/default1.png"  data-src="1115.08.png"  class="lazy"   alt="CSS3에서 3차원 뒤집기 효과를 얻는 방법" >
</body>
</html>

출력 결과:

CSS3에서 3차원 뒤집기 효과를 얻는 방법

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

위 내용은 CSS3에서 3차원 뒤집기 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

CSS : 같은 DOM에서 여러 ID를 사용할 수 있습니까?May 14, 2025 am 12:20 AM

아니요, 당신은 uplemultipleidsinthesamedom.1) idsmustbeuniqueperhtmlspecification, andusingduplicatescancauseSconsistentBrowserBehavior.2) useclassesforstylingmultipleelements, attributesectorscendats eftibutes 및 descenderfortrecture

HTML5의 목표 :보다 강력하고 액세스 가능한 웹 생성May 14, 2025 am 12:18 AM

html5aimstoenhancewebcapabilities, MakingItmoredynamic, Interactive, and Accessible.1) itsupportsmultimediaelementslikeand, 2) SemanticlementsImpreveAcessibilityandCodeReardability.3) 특징적인 부대, 응답 Whebappl

HTML5의 중요한 목표 : 웹 개발 및 사용자 경험 향상May 14, 2025 am 12:18 AM

html5aimstoenhancewebdevelopmentandusereerexperiencetroughsemanticstructure, multimediaintegration 및 performanceimprovements

html5 : 안전합니까?May 14, 2025 am 12:15 AM

html5isnotinherentlyinsecure, buttsfeaturescanleadtosecurityRiskSifMisusedOrimProperSimplemented.1) USETHETSANDTRIFICEINIFRAMESTOCONTROLEMEDEDEDENDENDENDENDENDENDENDENDENDENTANDENTANDERVULNERABILITIESLIKECLIKEJACKINGINITIONSLIKECLIKETHOING.2) 피난처에 대한 비난을 피하십시오

이전 HTML 버전과 비교할 때 HTML5 목표May 14, 2025 am 12:14 AM

html5aimedtoenhanceWebDevelopmentByIntrictionmanticalLiticalEmentements, nativeMultiMediasupport, 개선 된 정보 및 및 플린 컨테이션, html4andxhtml.1) itintructed -temantictagsiver ,, 개선 부양

CSS : ID 선택기를 사용하는 것이 좋지 않습니까?May 13, 2025 am 12:14 AM

ID 선택기를 사용하는 것은 본질적으로 CSS에서 나쁘지 않지만주의해서 사용해야합니다. 1) ID 선택기는 고유 한 요소 또는 JavaScript 후크에 적합합니다. 2) 일반적인 스타일의 경우 클래스 선택기가보다 유연하고 유지 관리 가능하므로 사용해야합니다. ID 및 클래스 사용의 균형을 유지함으로써보다 강력하고 효율적인 CSS 아키텍처를 구현할 수 있습니다.

HTML5 : 2024 년 목표May 13, 2025 am 12:13 AM

HTML5'SGOALSIN2024FOCUSONERFINEMENTANDENDEND 및 최적화, NOTNEWFEATURES.1) 최적화 된 렌더링을 향상시킵니다

HTML5가 개선하려고했던 주요 영역은 무엇입니까?May 13, 2025 am 12:12 AM

html5aimedtoimprovewebdevelopmentinfourkeyareas : 1) Multimediasupport, 2) Semantictructure, 3) Formcapabilities, 및 4) OfflineandStorageOptions.1) Html5intrudceDandlements, Simplifying MediaembeddingandenUsereXperxpercepence.2) NewSmanticallementalmentalmentementlementmentmentmentmentmentmentmentmentmentmentmentmentmentmentmentmentmentmentalments

See all articles