CSS3 2D 변환

CSS3 변환

CSS3 변환을 통해 요소를 이동, 크기 조정, 회전, 늘리거나 늘릴 수 있습니다.

브라우저 지원

IE10, FireFox 및 Opera는 변환 속성을 지원합니다. Chrome 및 Safari에는 접두사 -webkit-이 필요합니다.

참고: IE9에는 접두사 -ms-가 필요합니다.

2D 변환

이 장에서는 2D 변환에 대해 알아봅니다. 메소드:

translate()

rotate()

scale()

skew()

matrix()

translate() 메서드

요소는 지정된 왼쪽(x 좌표) 및 위쪽(y 좌표) 변위 매개변수에 따라 현재 위치에서 이동합니다. :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
    /*translate方法位移*/
        div {
        width:100px;
        height:80px;
        background-color:orange;
        position:absolute;
        left:100px;
        top:100px;
        }
        div.one {
        transform:translate(30px,30px);
        z-index:1;
        }
        div.two {
        background-color:blue;
        }
</style>
</head>
<body>
   <div class="one"></div>
   <div class="two"></div>
</body>
</html>

rotate() 메소드

요소가 부여한 각도가 시계 방향인 경우 음수 값이 허용되며 요소는 시계 반대방향으로 회전하게 됩니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
    div {
    width: 150px;
    height: 50px;
    background-color: orange;
    text-align: center;
    position: absolute;
    left: 100px;
    top: 100px;
    }
    div.one {
    transform: rotate(30deg);
    -webkit-transform:rotate(30deg);
    }
    div.two {
    background-color: blue;
    color: white;
    }
</style>
</head>
<body>
   <div class="one"></div>
   <div class="two"></div>
</body>
</html>

scale() 메서드

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
    div{
    width: 100px;
    height: 100px;
    background-color: orange;
    position: absolute;
    left: 100px;
    height: 100px;
    }
    div.one {
    background-color: red;
    transform: scale(0.5,0.5);
    }
</style>
</head>
<body>
   <div>
     <div class="one"></div>
   </div>
</body>
</html>

skew() 메서드

skew() 메서드를 사용하면 지정된 가로선(X축) 및 세로선(Y축) 매개변수에 따라 요소가 지정된 각도로 기울어집니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
    div{
    width:100px;
    height:100px;
    background-color:orange;
    position:absolute;
    left:100px;
    top:100px;
    }
    div.one {
    background-color:red;
    transform:skew(30deg,10deg);
    }
</style>
</head>
<body>
   <div></div>
   <div class="one"></div>
</body>
</html>

Matrix() 메소드

matrix() 메소드는 모든 2D 변환 메소드를 결합합니다.

matrix() 메서드는 6개의 매개변수를 사용하며 요소 회전, 크기 조정, 이동 및 기울이기를 수행할 수 있는 수학 함수를 포함합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
    div{
    width:100px;
    height:100px;
    background-color:orange;
    position:absolute;
    left:100px;
    top:100px;
    }
    div.one {
    transform:matrix(0.866,0.5,-0.5,0.866,0,0);
    background-color:red;
    }
</style>
</head>
<body>
   <div></div>
   <div class="one"></div>
</body>
</html>

새 변환 속성

모든 변환 속성은 다음과 같습니다.

속성 설명

transform 2D 또는 3D 변형 요소에 적합 3 🎜>

기능 |

translate(x,y) X 및 Y축을 따라 요소를 이동하는 2D 변환을 정의합니다.

translateX(n) X축을 따라 요소를 이동하는 2D 변환을 정의합니다.

translateY(n) Y축을 따라 요소를 이동하는 2D 변환을 정의합니다.

scale(x,y) 요소의 너비와 높이를 변경하는 2D 스케일링 변환을 정의합니다. scaleX(n) 요소의 너비를 변경하는 2D 크기 조정 변환을 정의합니다.

scaleY(n) 요소의 높이를 변경하는 2D 스케일링 변환을 정의합니다.

rotate(angle) 매개변수에 각도를 지정하여 2D 회전을 정의합니다.

skew(x-angle,y-angle)는 X 및 Y축을 따라 2D 기울이기 변환을 정의합니다.

skewX(angle) X축을 따라 2D 기울이기 변환을 정의합니다.

skewY(angle) Y축을 따라 2D 기울이기 변환을 정의합니다.

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style type="text/css"> div{ width:100px; height:100px; background-color:orange; position:absolute; left:100px; top:100px; } div.one { transform:matrix(0.866,0.5,-0.5,0.866,0,0); background-color:red; } </style> </head> <body> <div></div> <div class="one"></div> </body> </html>

제출하다 코드 재설정

자동운전