CSS3의 3차원 평면의 Z축은 음수 값을 갖습니다. 3차원 좌표계에서 화면 바깥쪽으로 향하는 z축의 값은 양수이고,translate3D속성값의 z축이 음수이면 화면 안쪽으로 향하는 값은 음수이다. 요소가 화면으로 옮겨지고 구문은 "transform:translate3d(x, y,z)"입니다.
이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
css3에 3차원 평면의 z축에 음수 값이 있나요?
3차원 평면에 음수 값이 있나요? 좌표계는 3차원 공간을 말하는데, 공간은 Z축 3개의 축으로 구성되어 있는데, 화면 바깥에는 양의 값이 있고 안에는 음의 값이 있습니다!
3D 움직임 move3D
transform: translateX(100px) translateY(100px) translateZ(100px);简写方法transform:translate3d（x，y，z）
x, y, z는 생략할 수 없으며, 그렇지 않으면 0
3D 움직임이라고 쓴다. 2D 움직임을 기반으로 움직일 수 있는 방향이 추가적으로 추가되는데, 바로 z- axis Direction
transform：translateX（100px），仅仅在X轴移动 transform：translateY（100px），仅仅在Y轴移动 transform：translateZ（100px），仅仅在Z轴移动 transform：translate3d（x，y，z），设置，xyz的值，z要用像素单位，不带百分比
perspective
는 2D 평면에서 근거리, 크고 작은 시각적 입체 효과를 생성하지만 그 효과는 2차원일 뿐입니다.
1. 웹 페이지에서 3D 효과를 생성하려면 원근감이 필요합니다(2D 평면에 투영된 3D 개체로 이해)
2 인간의 시각적 위치를 시뮬레이션하려면 한쪽 눈을 배열하는 것을 생각할 수 있습니다. 보기
3. 관점 보기 거리라고도 합니다. 보기 거리는 사람의 눈에서 화면까지의 거리입니다.
4. 시각적 지점에 가까울수록 컴퓨터 평면의 이미지는 더 커집니다. 이미지가 작을수록
5. 원근의 단위는 픽셀입니다.
관찰된 요소의 상위 상자에 적힌 원근은
d입니다. 시청 거리는 사람의 눈에서 사물까지의 거리입니다. 화면의 원근이 작을수록 물체는 커집니다.
z: z축, 즉 물체와 화면 사이의 거리입니다. z축(양수 값)이 클수록 우리가 보는 물체는 더 커집니다.
translateZ
상위 상자에 원근 값을 지정하고 다른 div에 다른 z 값을 지정하면 효과가 달라집니다.
3D 회전 Rotate3d
transform:rotate3d(x,y,z,deg), 사용자 정의 축을 따라 각도를 회전합니다(그냥 이해하세요)
xyz는 벡터 축을 나타내는 회전 축의 벡터를 나타냅니다. 벡터 회전을 따라 마지막 것은 회전 각도를 나타냅니다
transform:rotate3d(1,0,0,45deg)x轴旋转45deg transform:rotate3d(1,1,0,45deg)对角线旋转45deg
3D 회전은 3차원 평면에서 x축, y축, z축 또는 사용자 정의 축을 따라 요소를 회전할 수 있습니다
구문:
transform:rotatex(45deg):沿x轴正方向旋转45deg transform:rotatey(45deg):沿y轴正方向旋转45deg transform:rotatez(45deg):沿z轴正方向旋转45deg transform:rotate3d(x,y,z,deg):沿着自定义轴旋转deg为角度（了解即可）
요소 회전 방향을 결정하려면 왼손잡이 기준
왼손잡이 기준:
왼손 엄지손가락이 x축의 양의 방향을 가리킵니다
다른 손가락이 있는 방향 bent는 요소가 x축을 따라 회전하는 방향입니다.
차이점
3D 프리젠테이션 변형 스타일1. 하위 요소가 3차원 환경을 켤지 여부를 제어합니다.
2. 평면 하위 요소는 3차원 환경을 켜지 않습니다. space, 기본값
3. 변환 스타일: 보존 -3d, 하위 요소는 3차원 공간을 엽니다.
4 코드는 상위에 기록되지만 하위 상자에 영향을 줍니다.
5. 매우 중요하며 나중에 사용해야 합니다 구문:
.fa {
perspective: 500px;
position: relative;
margin: 50px auto;
transform-style: preserve-3d;
}
.son1,
.son,
.fa {
width: 200px;
height: 200px;
transition: all 2s;
}2. CSS 스타일
상자 사양 크기, 3D 렌더링을 추가하는 것을 잊지 마세요
백 박스는 y축을 따라 180도 회전해야 합니다
마지막으로 마우스 상자를 통과하여 Y축을 따라 180도 회전합니다
(동영상 공유 학습:
css 동영상 튜토리얼)
위 내용은 CSS3의 3차원 평면의 z축에 음수 값이 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!