CSS3 3D 변환 기능 사용
- 王林앞으로
- 2023-09-16 14:33:07928검색
3D 변환을 사용하면 요소를 x축, y축 및 z축으로 이동할 수 있습니다. 다음은 CSS3 3D 변환-
다음 메서드는 3D 변환-
| Sr을 호출하는 데 사용됩니다. ,n,n) | 은 행렬의 16개 값을 사용하여 요소를 변환하는 데 사용됩니다 |
|---|---|
| 2 | translate3d( x,y,z) 은 x축을 사용하여 요소를 변환하는 데 사용됩니다. y축 및 z축 |
| 3 | translateX(x) 은 x축을 사용하여 요소를 변환하는 데 사용됩니다. |
| 4 Elatey(y) | Y축 변환을 사용하는 데 사용됩니다. 요소 |
| translatez (z) | Y 축 변환 요소 |
| 예제 | Live 에션 <!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
display: inline-block;
width: 200px;
height: 200px;
border: 1px solid #CCC;
margin-left: 20px;
}
.rotateX {
width: 100%;
height: 100%;
background: rgb(52, 0, 241);
transform: perspective(600px) rotateX(85deg);
}
.rotateY {
width: 100%;
height: 100%;
background: rgb(55, 0, 255);
transform: perspective(600px) rotateY(75deg);
}
.translateZ{
width: 100%;
height: 100%;
background: rgb(55, 0, 255);
transform: perspective(600px) translateZ(-200px);
}
</style>
</head>
<body>
<h1>3D transform function example</h1>
<div class="container">
<div class="rotateX"></div>
</div>
<div class="container">
<div class="rotateY"></div>
</div>
<div class="container">
<div class="translateZ"></div>
</div>
</body>
</html> 출력
| 위 코드는 다음과 같은 출력을 생성합니다 -
위 내용은 CSS3 3D 변환 기능 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 tutorialspoint.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：CSS 의사 클래스란 무엇입니까?다음 기사：CSS 의사 클래스란 무엇입니까?