CSS3 3D 변환
CSS3 3D 변환
3D 변환
CSS3을 사용하면 3D 변환을 사용하여 요소의 형식을 지정할 수 있습니다.
이 장에서는 다음 3D 변환 방법 중 일부를 배우게 됩니다:
rotateX()
rotateY()
rotateX() 방법
rotateX( ) 방법, X축이 특정 각도만큼 회전되는 요소입니다.
예
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
width:100px;
height:75px;
background-color: #f4ff99;
border:1px solid black;
}
div#div2
{
transform:rotateX(120deg);
-webkit-transform:rotateX(120deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>PHP.CN</div>
<div id="div2">HELLO</div>
</body>
</html>프로그램을 실행하여 시험해 보세요
rotateY() 메서드
rotateY() 메서드는 Y축을 중심으로 지정된 각도로 요소를 회전합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:rotateY(130deg);
-webkit-transform:rotateY(130deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello</div>
<div id="div2">Hello.</div>
</body>
</html>프로그램을 실행하고 사용해 보세요
변형 속성
아래 표에는 모든 변환 속성이 나열되어 있습니다.
| 3 | transform-origin | ||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 3 | transform-style | ||||||||||||||||||||||||||||
| 3 | perspective | ||||||||||||||||||||||||||||
| 3 | perspective-origin | ||||||||||||||||||||||||||||
| 3 | backface-visibility | ||||||||||||||||||||||||||||
| 3 | 3D 변환 방법
|
![프론트엔드 Vue3 실전 전투 [손글씨 vue 프로젝트]](https://img.php.cn/upload/course/000/000/068/639b12e98e0b5441.png)
![APIPOST 튜토리얼 [네트워크 통신 관련 기술 개념의 대중화]](https://img.php.cn/upload/course/000/000/068/63996f34c6c94370.png)
