CSS3 transform转换

一.基本知识:
2D转换能够改变指定元素的位置、尺寸和形状属性。
实现2D转换需要使用transform属性，属性值是一些转换函数，下面分别做一下介绍。
二.转换函数:
1.translate()函数:
此函数可以根据参数实现指定元素的移动效果。
具有两个参数，第一个参数规定水平方向的位移距离，第二个参数规定垂直方向的位移距离。
代码实例:

<!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。
特别说明:如果只有一个参数，那么这个参数同时应用于水平和垂直方位;如果参数是百分比值，参考尺寸是元素自身对应的长度和宽度尺寸；对于下面的函数同样适用。
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()函数:
此函数可以实现指定元素的缩放效果。
具有两个参数，第一个参数是宽度缩放倍数，第二个是高度缩放倍数。
代码实例:

<!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宽度放大两倍，高度放大三倍。
4.skew()函数:
此函数可以设定指定元素的扭曲角度。
具有两个参数，第一个参数设置水平方向上的扭曲变形，第二个参数设置垂直方向的扭曲变形。
第二个参数如果省略，那么默认值就是0。
代码实例一:

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

以上代码可以测试水平方向的扭曲，拖动滚动条测试，则可以一目了然了。
实例代码二:

<!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()函数:
以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a b 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°

Weiter lernen

neue Datei

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

einreichen Code zurücksetzen

Automatische Operation

CSS3 transform转换

GrundschuleTutorial zur Imitation einer Imperial CMS-Unternehmenswebsite

GrundschuleNeulinge ohne WordPress-Grundkenntnisse erstellen persönliche Blogs und Unternehmenswebsites

GrundschuleUltimatives CMS-zertifiziertes Anleitungsvideo zum Erstellen von Websites

GrundschuleFront-End-Projekt-Shangyou [umfassende Praxis der HTML/CSS/JS-Technologie]

DazwischenliegendVue3.0 von 0 zum Aufbau einer universellen Backend-Managementsystem-Projektpraxis

GrundschuleNullbasierter Front-End-Kurs [Vue fortgeschrittenes Lernen und praktische Anwendung]

GrundschuleWEB-Frontend-Tutorial [HTML5+CSS3+JS]

GrundschuleKurze Einführung in Apipost

DazwischenliegendVue3 + TypeScript praktische Tutorial-Projektpraxis auf Unternehmensebene

GrundschuleLassen Sie uns kurz über die Gründung eines Unternehmens in PHP sprechen

DazwischenliegendVUE E-Commerce-Projekt (Front-End- und Back-End-Doppelprojekt, tatsächlicher Kampf)

GrundschulePraktische Anwendung von Apipost [API, Schnittstelle, automatisiertes Testen, Mock]