CSS3변환-원산지변환

이 속성은 회전된 요소의 기준점 위치를 설정하는 데 사용됩니다.
문법 구조:

transform-origin: x y z;

매개변수 분석:
1.x: 요소 회전 기준점의 x축 좌표를 지정합니다. 속성 값은 다음과 같습니다. 왼쪽, 가운데, 오른쪽, 길이 및 %.
2.y: 요소의 회전 기준점의 y축 좌표를 지정합니다. 속성 값은 왼쪽, 중심, 오른쪽, 길이 및 %일 수 있습니다.
3.z: 이 매개변수는 3D 회전 중에만 사용됩니다. 요소의 회전 기준점의 Z축 좌표를 지정하는 데 사용됩니다. 속성 값은 길이만 될 수 있습니다.
기준점 위치 정보:
이 속성의 핵심은 기준점 위치가 무엇인지, 기준점 위치의 좌표를 결정하는 데 사용되는 표준을 이해하는 것입니다.
기준점 위치는 요소가 회전하는 축 위치입니다.
기준점 위치의 좌표는 x축의 오른쪽에 있는 양수, y축의 아래쪽에 있는 양수를 기준으로 직사각형의 원래 왼쪽 위 모서리(0,0)를 기준으로 합니다.
참고: 기준점 위치가 설정되지 않은 경우 기본적으로 기준점 위치는 요소의 중심 위치(50% 50% 0)입니다.
그림은 다음과 같습니다.
QQ截图20161015155121.png

코드 예:

<!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>

제출하다 코드 재설정

자동운전