노트: CS3 제작 중축 회전 입방체
3524 단어 CSS
perspective
요소가 표시되는 위치의 뷰를 설정합니다.
perspective: number|none;값
묘사
number
요소 거리 뷰의 거리(픽셀 단위)
none
기본값입니다.0과 같습니다.원근 설정하지 않기
-webkit-perspective: 800px;
-moz-perspective: 800px;
-ms-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;perspective-origin
3D 요소의 기준점 위치perspective-origin 속성을 설정하여 3D 요소의 X축 및 Y축을 정의합니다.이 속성을 사용하면 3D 요소의 아래쪽 위치를 변경할 수 있습니다.원소에 perspective-origin 속성을 정의할 때, 그 하위 원소는 원소 자체가 아닌 투시 효과를 얻을 수 있습니다.
perspective-origin: x-axis y-axis;값
묘사
x-axis
x축에서 뷰의 위치를 정의합니다.기본값: 50%
y-axis
Y축에서 뷰의 위치를 정의합니다.기본값: 50%
-webkit-perspective-origin: 50% 200px;
-moz-perspective-origin: 50% 200px;
-ms-perspective-origin: 50% 200px;
-o-perspective-origin: 50% 200px;
perspective-origin: 50% 200px;-webkit-box-reflect
W3C 표준 속성이 아닌 섀도우 제작 시 브라우저 접두사 필요
box-reflect:none | <direction> <offset> <mask-box-image>값
묘사
none
기본값, 그림자 효과 없음
direction
그림자 방향 (above: 원도 위,below: 원도 아래,left: 원도 왼쪽,right: 원도 오른쪽)
offset
그림자와 원본 사이의 거리(픽셀 값/백분율)
mask-box-image
거꾸로 그림자의 커버 효과, 배경 그림/점차적으로 생산된 배경 이미지는 흠대 효과를 참고할 수 있다
-webkit-box-reflect: below 170px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0%, transparent), to(rgba(250, 250, 250, 0.1)));transform-origin
회전 요소의 기준점 위치 설정하기
transform-origin: x-axis y-axis z-axis;값
묘사
x-axis
뷰가 X축에 배치되는 위치를 정의합니다.가능한 값 (left/center/right/length/%)
y-axis
뷰가 Y축에 배치되는 위치를 정의합니다.가능한 값 (top/center/bottom/length/%)
z-axis
뷰가 Z축에 배치되는 위치를 정의합니다.가능한 값
transform-origin:20% 40%;이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
【Grunt】 복수의 CSS, JavaScript 파일을 minfy한다여러 CSS, JavaScript 파일을 Grunt를 사용하여 단번에 각각 하나의 파일로 minfy합니다. ① Gruntfile 작성 ② package.json 쓰기 ④ html CSS, JavaScript 지정 부...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
