CSS3변환-원산지변환
이 속성은 회전된 요소의 기준점 위치를 설정하는 데 사용됩니다.
문법 구조:
transform-origin: x y z;
매개변수 분석:
1.x: 요소 회전 기준점의 x축 좌표를 지정합니다. 속성 값은 다음과 같습니다. 왼쪽, 가운데, 오른쪽, 길이 및 %.
2.y: 요소의 회전 기준점의 y축 좌표를 지정합니다. 속성 값은 왼쪽, 중심, 오른쪽, 길이 및 %일 수 있습니다.
3.z: 이 매개변수는 3D 회전 중에만 사용됩니다. 요소의 회전 기준점의 Z축 좌표를 지정하는 데 사용됩니다. 속성 값은 길이만 될 수 있습니다.
기준점 위치 정보:
이 속성의 핵심은 기준점 위치가 무엇인지, 기준점 위치의 좌표를 결정하는 데 사용되는 표준을 이해하는 것입니다.
기준점 위치는 요소가 회전하는 축 위치입니다.
기준점 위치의 좌표는 x축의 오른쪽에 있는 양수, y축의 아래쪽에 있는 양수를 기준으로 직사각형의 원래 왼쪽 위 모서리(0,0)를 기준으로 합니다.
참고: 기준점 위치가 설정되지 않은 경우 기본적으로 기준점 위치는 요소의 중심 위치(50% 50% 0)입니다.
그림은 다음과 같습니다.
코드 예:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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:rotate(45deg);
transform-origin:40px 40px;
font-size:12px;
-ms-transform:rotate(45deg); /* IE 9 */
-ms-transform-origin:40px 40px; /* IE 9 */
-webkit-transform:rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:40px 40px; /* Safari and Chrome */
-moz-transform:rotate(45deg); /* Firefox */
-moz-transform-origin:40px 40px;/* Firefox */
-o-transform:rotate(45deg); /* Opera */
-o-transform-origin:40px 40px; /* Opera */
}
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="rotate(" + value + "deg)";
oinner.style.msTransform="rotate(" + value + "deg)";
oinner.style.webkitTransform="rotate(" + value + "deg)";
oinner.style.MozTransform="rotate(" + value + "deg)";
oinner.style.OTransform="rotate(" + value + "deg)";
opersp.innerHTML=value + "deg";
}
function changeOrg(){
var ox=document.getElementById('ox');
var oy=document.getElementById('oy');
var oinner=document.getElementById('inner');
var origin=document.getElementById('origin');
var x=ox.value;
var y=oy.value;
oinner.style.transformOrigin = x + 'px ' + y + 'px';
oinner.style.msTransformOrigin = x + 'px ' + y + 'px';
oinner.style.webkitTransformOrigin = x + 'px ' + y + 'px';
oinner.style.MozTransformOrigin = x + 'px ' + y + 'px';
oinner.style.OTransformOrigin = x + 'px ' + y + 'px';
origin.innerHTML = x + "px " + y + "px";
}
window.onload = function () {
var oz = document.getElementById("oz");
var ox = document.getElementById("ox");
var oy = document.getElementById("oy");
oz.onmousemove = function () { changeRot(this.value) }
ox.onmousemove = function () { changeOrg() }
oy.onmousemove = function () { changeOrg() }
}
</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" value="45" id="oz"/></td>
</tr>
<tr>
<td class="left">rotateY:</td>
<td>(<span id="persp">45deg</span>)</td>
</tr>
<tr>
<td class="left">X轴:</td>
<td><input type="range" min="-100" max="200" value="40" id="ox"/></td>
</tr>
<tr>
<td class="left">Y轴:</td>
<td><input type="range" min="-100" max="200" value="40" id="oy"/></td>
</tr>
<tr>
<td class="left">origin:</td>
<td><span id="origin">40px 40px</span></td>
</tr>
</table>
</body>
</html>위 코드는 시연 효과를 위해 매개변수를 자동으로 조정할 수 있으며 사용법을 요약할 수 있어야 합니다. 이 속성의.
다음 섹션<!DOCTYPE html>
<html>
<head>
<title>CSS3 transform-origin 属性</title>
<style>
#div1
{
position: relative;
height: 200px;
width: 200px;
margin: 100px;
padding:10px;
border: 1px solid black;
}
#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotate(45deg);
transform-origin:30% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:30% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:30% 40%; /* Safari and Chrome */
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">我在这呢</div>
</div>
</body>
</html>
