3d 변환과 함께 사용하여 요소를 x축, y축 및 z축으로 이동할 수 있습니다. 다음은 CSS3 3D Transform의 몇 가지 방법입니다 -
아래 방법은 3D 변환을 호출하는 데 사용됩니다 -
| 시니어 번호 | 가치 및 설명 |
|---|---|
| 1 | 행렬3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 16개의 행렬 값을 사용하여 요소를 변환하는 데 사용됩니다. |
| 2 | translate3d(x,y,z) x축, y축 및 z축을 사용하여 요소를 변환하는 데 사용됩니다. |
| 3 | 번역X(x) x축을 사용하여 요소를 변환하는 데 사용됩니다. |
| 4 | 번역Y(y) y축을 사용하여 요소를 변환하는 데 사용됩니다. |
| 5 | 번역Z(z) y축을 사용하여 요소를 변환하는 데 사용됩니다. |
다음은 CSS3 3D 변환 기능에 대한 코드입니다 -
예시
<!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> 출력
위의 코드는 다음과 같은 출력을 생성합니다 -
