CSS3transform-origintransformation

Atribut ini digunakan untuk menetapkan kedudukan titik asas bagi elemen yang diputar.
Struktur tatabahasa:

transform-origin: x y z;

Analisis parameter:
1.x: Menentukan koordinat paksi-x bagi titik asas putaran elemen kiri, tengah, kanan , panjang dan %.
2.y: Menentukan koordinat paksi-y bagi titik asas putaran elemen Nilai atribut boleh ke kiri, tengah, kanan, panjang dan %.
3.z: Parameter ini hanya digunakan semasa putaran 3D Ia digunakan untuk menentukan koordinat paksi-z titik asas putaran elemen Nilai atribut hanya boleh panjang.
Mengenai kedudukan titik asas:
Kunci kepada atribut ini adalah untuk memahami kedudukan titik asas dan piawaian yang digunakan untuk menentukan koordinat kedudukan titik asas.
Kedudukan titik asas ialah kedudukan paksi di sekeliling elemen berputar.
Koordinat kedudukan titik asas adalah berdasarkan sudut kiri atas asal segi empat tepat (0,0) sebagai rujukan Positif ke kanan pada paksi-x dan positif ke bawah pada paksi-y.
Nota: Jika kedudukan titik asas tidak ditetapkan, maka secara lalai, kedudukan titik asas ialah kedudukan tengah elemen (50% 50% 0).
Ilustrasi adalah seperti berikut:
QQ截图20161015155121.png

Contoh kod:

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

Kod di atas boleh melaraskan parameter secara automatik untuk kesan demonstrasi. Anda boleh meringkaskan penggunaan daripada sifat ini.

Meneruskan pembelajaran

fail baharu

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

serahkan Tetapkan Semula Kod

Operasi automatik

CSS3transform-origintransformation

peringkat rendahTutorial tapak web tiruan perusahaan Imperial CMS

peringkat rendahPemula dengan asas sifar dalam WordPress membina blog peribadi dan laman web korporat

peringkat rendahVideo arahan pembinaan tapak web berasaskan sifar CMS muktamad

peringkat rendahProjek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]

PertengahanVue3.0 daripada 0 untuk membina amalan projek sistem pengurusan belakang universal

peringkat rendahKursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]

peringkat rendahTutorial bahagian hadapan WEB [HTML5+CSS3+JS]

peringkat rendahBermula dengan cepat dengan apipost

PertengahanTutorial praktikal Vue3+TypeScript amalan projek peringkat perusahaan

peringkat rendahMari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP

PertengahanProjek e-dagang VUE (pertempuran sebenar projek dua bahagian hadapan & belakang)

peringkat rendahAplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]