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°回転させます
次のセクション