Transformasi transformasi CSS3
1. Pengetahuan asas:
Transformasi 2D boleh menukar atribut kedudukan, saiz dan bentuk elemen yang ditentukan.
Untuk melaksanakan penukaran 2D, anda perlu menggunakan atribut transform Nilai atribut ialah beberapa fungsi penukaran.
2. Fungsi penukaran:
1. Fungsi translate():
Fungsi ini boleh berasaskan pada parameter Laksanakan kesan pergerakan elemen yang ditentukan.
mempunyai dua parameter, parameter pertama menentukan jarak anjakan dalam arah mendatar, dan parameter kedua menentukan jarak anjakan dalam arah menegak.
Contoh kod:
<!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>Kod di atas boleh menetapkan anjakan div kepada 50px dalam kedua-dua arah mendatar dan menegak.
Nota khas: Jika terdapat hanya satu parameter, maka parameter ini digunakan untuk kedua-dua orientasi mendatar dan menegak jika parameter ialah nilai peratusan, saiz rujukan ialah dimensi panjang dan lebar yang sepadan bagi elemen itu sendiri; kepada fungsi berikut.
Fungsi 2.rotate():
Fungsi ini boleh menentukan sudut putaran mengikut arah jam bagi elemen Jika nilai negatif, ia adalah putaran lawan jam.
Contoh kod:
<!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>Kod di atas boleh memutarkan elemen div 60 darjah mengikut arah jam.
Fungsi 3.scale():
Fungsi ini boleh mencapai kesan penskalaan elemen yang ditentukan.
mempunyai dua parameter, parameter pertama ialah faktor penskalaan lebar, dan yang kedua ialah faktor penskalaan ketinggian.
Contoh kod:
<!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>Kod di atas boleh menggandakan lebar div dan tiga kali ganda ketinggian.
4.skew() fungsi:
Fungsi ini boleh menetapkan sudut herotan elemen yang ditentukan.
mempunyai dua parameter, parameter pertama menetapkan herotan dalam arah mendatar, dan parameter kedua menetapkan herotan dalam arah menegak.
Jika parameter kedua ditinggalkan, nilai lalai ialah 0.
Contoh Kod 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>Kod di atas boleh menguji herotan mendatar Seret bar skrol untuk menguji dan anda boleh melihatnya dengan jelas sekali imbas.
Contoh kod dua:
<!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>Kod di atas boleh menguji herotan dalam arah menegak Seret bar skrol untuk menguji dan anda boleh melihatnya dengan jelas sekali imbas.
Fungsi 5.matrix():
Nyatakan matriks transformasi dalam bentuk enam nilai (a, b, c, d, e, f) Penjelmaan 2D adalah bersamaan dengan menggunakan matriks penjelmaan [a b c d e f] secara langsung.
<!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>Gunakan kaedah matriks() untuk memutarkan elemen div 30°
![Projek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Kursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutorial bahagian hadapan WEB [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Aplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
