CSS3transform-origintransformation

This property is used to set the base point position of the rotated element.
Grammar structure:

transform-origin: x y z;

Parameter analysis:
1.x: Specifies the x-axis coordinate of the element's rotation base point. The attribute value can be left, center, right , length and %.
2.y: Specifies the y-axis coordinate of the element's rotation base point. The attribute values can be left, center, right, length and %.
3.z: This parameter is only used during 3D rotation. It is used to specify the z-axis coordinate of the element's rotation base point. The attribute value can only be length.
About the base point position:
The key to this attribute is to understand what the base point position is and what standards are used to determine the coordinates of the base point position.
The base point position is the axis position around which the element rotates.
The coordinates of the base point position are based on the original upper left corner of the rectangle (0,0), which is positive to the right on the x-axis and positive downward on the y-axis.
Note: If the base point position is not set, then by default, the base point position is the center position of the element (50% 50% 0).
The illustration is as follows:
QQ截图20161015155121.png

Code example:

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

The above code can automatically adjust parameters for demonstration effects. It should be possible to summarize the usage of this attribute.

Continuing Learning

new file

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

submit Reset Code

Automatic operation

CSS3transform-origintransformation

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]