CSS3 변환 변환
1. 기본 지식:
2D 변환은 지정된 요소의 위치, 크기 및 모양 속성을 변경할 수 있습니다.
2D 변환을 구현하려면 변환 속성을 사용해야 합니다. 속성 값은 아래에 소개되어 있습니다.
2. 변환 기능:
1. 번역() 기능:
이 기능은 다음을 기반으로 할 수 있습니다. 매개변수에 지정된 요소의 이동 효과를 구현합니다.
에는 두 개의 매개변수가 있는데, 첫 번째 매개변수는 수평 방향의 변위 거리를 지정하고, 두 번째 매개변수는 수직 방향의 변위 거리를 지정합니다.
코드 예:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http:/
/" />
<title>php中文网</title>
<style type="text/css">
#box{
width:400px;
height:400px;
background:green;
}
#box .demo{
width:50px;
height:50px;
background:red;
transform:translate(50px,50px);
-ms-transform:translate(50px,50px);/*IE9 */
-webkit-transform:translate(50px,50px);/*Safari and Chrome*/
-o-transform:translate(50px,50px);/* Opera*/
-moz-transform:translate(50px,50px);/* Firefox */
}
</style>
</head>
<body>
<div id="box">
<div class="demo"></div>
</div>
</body>
</html>위 코드는 div의 변위를 가로 및 세로 방향 모두 50px로 설정할 수 있습니다.
특별 참고 사항: 매개변수가 하나만 있는 경우 이 매개변수는 가로 및 세로 방향 모두에 적용됩니다. 매개변수가 백분율 값인 경우 참조 크기는 요소 자체의 해당 길이 및 너비 치수와 동일하게 적용됩니다. 다음 기능에.
2.rotate() 함수:
이 함수는 요소의 시계 방향 회전 각도를 지정할 수 있습니다. 음수 값이면 반시계 방향 회전입니다.
코드 예:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
#box{
width:400px;
height:400px;
background:green;
}
#box .demo{
width:50px;
height:50px;
background:red;
transform:rotate(60deg);
-ms-transform:rotate(60deg);/* IE 9 */
-webkit-transform:rotate(60deg);/* Safari and Chrome */
-o-transform:rotate(60deg);/* Opera */
-moz-transform:rotate(60deg);
}
</style>
</head>
<body>
<div id="box">
<div class="demo"></div>
</div>
</body>
</html>위 코드는 div 요소를 시계 방향으로 60도 회전할 수 있습니다.
3.scale() 함수:
이 함수는 지정된 요소의 크기 조정 효과를 얻을 수 있습니다.
에는 두 개의 매개변수가 있습니다. 첫 번째 매개변수는 너비 배율 인수이고 두 번째 매개변수는 높이 배율 인수입니다.
코드 예:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
#box{
width:400px;
height:400px;
background:green;
margin:100px;
}
#box .demo{
width:50px;
height:50px;
background:red;
transform:scale(2,3);
-ms-transform:scale(2,3);/* IE 9 */
-webkit-transform:scale(2,3);/* Safari 和 Chrome */
-o-transform:scale(2,3);/* Opera */
-moz-transform:scale(2,3);/* Firefox */
}
</style>
</head>
<body>
<div id="box">
<div class="demo"></div>
</div>
</body>
</html>위 코드는 div의 너비를 두 배, 높이를 세 배로 늘릴 수 있습니다.
4.skew() 함수:
이 함수는 지정된 요소의 왜곡 각도를 설정할 수 있습니다.
에는 두 개의 매개변수가 있는데, 첫 번째 매개변수는 수평 방향의 왜곡을 설정하고, 두 번째 매개변수는 수직 방향의 왜곡을 설정합니다.
두 번째 매개변수를 생략할 경우 기본값은 0입니다.
코드 예 1:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
#box{
position:relative;
height:200px;
width:200px;
margin-top:150px;
margin-left:150px;
border:1px solid black;
}
#inner{
padding:50px;
position:absolute;
border:1px solid black;
background-color:yellow;
transform-origin:40 40;
font-size:12px;
transform:skew(45deg);
-ms-transform:skew(45deg);/*IE9*/
-webkit-transform:skew(45deg);/*Safari and Chrome*/
-o-transform:skew(45deg);/*Opera*/
-moz-transform:skew(45deg);/*Firefox*/
}
table{
font-size:12px;
width:300px;
margin-left:120px;
}
.left{text-align:right}
</style>
<script type="text/javascript">
function changeRot(value){
var oinner=document.getElementById('inner');
var opersp=document.getElementById('persp');
oinner.style.transform="skew(" + value + "deg)";
oinner.style.msTransform="skew(" + value + "deg)";
oinner.style.webkitTransform="skew(" + value + "deg)";
oinner.style.MozTransform="skew(" + value + "deg)";
oinner.style.OTransform="skew(" + value + "deg)";
opersp.innerHTML=value + "deg";
}
window.onload=function(){
var range=document.getElementById("range");
range.onmousemove=function(){
changeRot(this.value);
}
}
</script>
</head>
<body>
<div id="box">
<div id="inner">php中文网</div>
</div>
<table>
<tr>
<td class="left">扭曲:</td>
<td><input type="range" min="-360" max="360" id="range" value="45"/></td>
</tr>
<tr>
<td class="left">skew:</td>
<td>(<span id="persp">45deg</span>)</td>
</tr>
</table>
</body>
</html>위 코드는 가로 왜곡을 테스트하기 위해 스크롤 막대를 드래그하면 한 눈에 명확하게 볼 수 있습니다.
예제 코드 2:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
#box{
position:relative;
height:200px;
width:200px;
margin-top:150px;
margin-left:150px;
border:1px solid black;
}
#inner{
padding:50px;
position:absolute;
border:1px solid black;
background-color:yellow;
transform-origin:40 40;
font-size:12px;
transform:skew(0,45deg);
-ms-transform:skew(0,45deg);/*IE9*/
-webkit-transform:skew(0,45deg);/*Safari and Chrome*/
-o-transform:skew(0,45deg);/*Opera*/
-moz-transform:skew(0,45deg);/*Firefox*/
}
table{
font-size:12px;
width:300px;
margin-left:120px;
}
.left{text-align:right}
</style>
<script type="text/javascript">
function changeRot(value){
var oinner=document.getElementById('inner');
var opersp=document.getElementById('persp');
oinner.style.transform="skew(0," + value + "deg)";
oinner.style.msTransform="skew(0," + value + "deg)";
oinner.style.webkitTransform="skew(0," + value + "deg)";
oinner.style.MozTransform="skew(0," + value + "deg)";
oinner.style.OTransform="skew(0," + value + "deg)";
opersp.innerHTML=value + "deg";
}
window.onload=function(){
var range=document.getElementById("range");
range.onmousemove=function(){
changeRot(this.value);
}
}
</script>
</head>
<body>
<div id="box">
<div id="inner">php中文网</div>
</div>
<table>
<tr>
<td class="left">扭曲:</td>
<td><input type="range" min="-360" max="360" id="range" value="45"/></td>
</tr>
<tr>
<td class="left">skew:</td>
<td>(<span id="persp">45deg</span>)</td>
</tr>
</table>
</body>
</html>위 코드는 세로 방향의 왜곡을 테스트할 수 있도록 스크롤바를 드래그해 테스트해 보면 한눈에 알 수 있습니다.
5.matrix() 함수:
6개 값(a, b, c, d, e, f) 형식으로 변환 행렬을 지정합니다. 2D 변환은 [a b c d e f] 변환 행렬을 직접 적용하는 것과 동일합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>matrix() 메서드를 사용하여 div 요소를 30° 회전합니다
![프론트엔드 프로젝트 - Shangyou [HTML/CSS/JS 기술 종합실습]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![제로 기반 프론트엔드 과정 [Vue 고급 학습 및 실무 적용]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![웹 프론트엔드 튜토리얼 [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Apipost 실무 응용 [api, 인터페이스, 자동화 테스트, 모의]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
