CSS3 変換変換

1. 基本知識:
2D 変換では、指定された要素の位置、サイズ、形状の属性を変更できます。
2D変換を実装するには、transform属性を使用する必要があります。属性値は以下に紹介されています。
2. 変換関数:
1. translation() 関数:
この関数は、パラメーターに従って指定された要素の移動効果を実現できます。
には 2 つのパラメーターがあり、最初のパラメーターは水平方向の変位距離を指定し、2 番目のパラメーターは垂直方向の変位距離を指定します。
コード例:

<!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 に設定できます。
特記事項: パラメーターが 1 つだけの場合、このパラメーターは水平方向と垂直方向の両方に適用されます。パラメーターがパーセント値の場合、参照サイズは要素自体の対応する長さと幅のサイズになります。以下の機能。
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() 関数:
この関数は、指定された要素のスケーリング効果を実現できます。
2 つのパラメーターがあり、最初のパラメーターは幅のスケーリング係数、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{
  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 の幅を 2 倍、高さを 3 倍にすることができます。
4.skew()関数:
この関数は、指定された要素の歪み角度を設定できます。
2 つのパラメーターがあり、最初のパラメーターは水平方向の歪みを設定し、2 番目のパラメーターは垂直方向の歪みを設定します。
2 番目のパラメータを省略した場合、デフォルト値は 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 変換を指定します。これは、[ab 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°回転させます

学び続ける

新しいファイル

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

提出するリセットコード

自動運転