Dieses Mal stelle ich Ihnen das 2D-Konvertierungsmodul in HTML und CSS vor. Was sind die Vorsichtsmaßnahmen für das 2D-Konvertierungsmodul in HTML und CSS?
1. 2D-Konvertierungsmodul
2D-Konvertierungsmodul
/*wobei Grad die Einheit ist, die angibt, wie viele Grad*/
transformieren: rotation(45deg); /*
Erster Parameter: Horizontale Richtung
Zweiter Parameter: Vertikale Richtung
*/transform: translator(100px, 0px);/*
Erster Parameter: Horizontale Richtung
Zwei Parameter: Vertikale Richtung
Hinweise:
Wenn der Wert 1 ist, bedeutet dies keine Änderung.
Wenn der Wert größer als 1 ist, bedeutet dies, dass er vergrößert werden muss.
Wenn der Wert kleiner als 1 ist bedeutet, dass es reduziert werden muss
Wenn die horizontale und vertikale Skalierung gleich sind, kann sie als Parameter abgekürzt werden
*//*transform: scale(0.5, 0.5);*/transform: scale(1.5 );/*
Hinweis:
1. Wenn mehrere Transformationen erforderlich sind, trennen Sie diese durch Leerzeichen
2. Das 2D-Konvertierungsmodul ändert das Koordinatensystem des Elements, sodass die Verschiebung nach der Drehung keine horizontale Verschiebung ist
*/transform: rotieren(45 Grad) übersetzen(100px, 0px);
2D-Konvertierungsmodul
2. 2D-Konvertierungsmodul – Verformungsmittelpunkt
Standardmäßig drehen sich alle Elemente unter Verwendung ihres eigenen Mittelpunkts als Referenz. Wir können ihren Referenzpunkt über das Verformungsmittelpunktattribut ändern
/* 第一个参数:水平方向 第二个参数:垂直方向 注意点 取值有三种形式 具体像素 百分比 特殊关键字 */ /*transform-origin: 200px 0px;*/ /*transform-origin: 50% 50%;*/ /*transform-origin: 0% 0%;*/ /*transform-origin: center center;*/ transform-origin: left top;
3. Perspektivenattribut (Perspektive: 500px;) und Rotationsachse (Transformation: rotationY(45deg);)
1.Perspektive: 500px;
1.1 Was ist Perspektive
Fast groß und weit klein
1.2. Wichtige Punkte
Beachten Sie das unbedingt Das Perspektivattribut muss zu dem hinzugefügt werden, was gerendert werden muss. Über dem übergeordneten Element des Elements mit nahezu großen und weitaus kleinen Effekten
2.transform: rotierenY(45deg);
Welche Achse tun? Wenn Sie sich drehen möchten, müssen Sie nach dem Drehen nur die Achse hinzufügen. ;
Codebeispiel:
<html lang="en"> <head>
<meta charset="UTF-8">
<title>95-2D转换模块-旋转轴向</title>
<style>
*{ margin: 0; padding: 0; }
ul{ width: 800px; height: 500px; margin: 0 auto; }
ul li{ list-style: none; width: 200px; height: 200px; margin: 0 auto; margin-top: 50px; border: 1px solid #000;
/* 1.什么是透视 近大远小
2.注意点 一定要注意, 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面 */
perspective: 500px; } ul li img{ width: 200px; height: 200px;
/*perspective: 500px;*/
} ul li:nth-child(1){
/*默认情况下所有元素都是围绕Z轴进行旋转*/
transform: rotateZ(45deg); } ul li:nth-child(2) img{ transform: rotateX(45deg); } ul li:nth-child(3) img{ /* 总结: 想围绕哪个轴旋转, 那么只需要在rotate后面加上哪个轴即可 */ transform: rotateY(45deg); } </style> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>
4. Pokerübungen
<html lang="en">
<head>
<meta charset="UTF-8">
<title>96-2D转换模块-练习</title>
<style>
*{ margin: 0; padding: 0; }
p{ width: 310px; height: 438px; border: 1px solid #000;
background-color: skyblue; margin: 100px auto; perspective: 500px; }
p img{ transform-origin: center bottom; transition: transform 1s; }
p:hover img{ transform: rotateX(80deg); }
</style> </head> <body> <p>  </p>
</body>
</html>
5. Fotowand
<html lang="en">
<head>
<meta charset="UTF-8">
<title>97-2D转换模块-相片墙</title>
<style>
*{ margin: 0; padding: 0; }
ul{ height: 400px; border: 1px solid #000;
background-color: skyblue; margin-top: 100px;
text-align: center; }
ul li{ list-style: none;
width: 150px; height: 200px;
background-color: red; display: inline-block;
//转换成行内块级元素,用于水平排版
margin-top: 100px; transition: all 1s;
position: relative; box-shadow: 0 0 10px; }
ul li:nth-child(1){ transform: rotate(30deg); }
ul li:nth-child(2){ transform: rotate(-40deg); }
ul li:nth-child(3){ transform: rotate(10deg); }
ul li:nth-child(4){ transform: rotate(45deg); }
ul li img{ width: 150px; height: 200px;
border: 5px solid #fff; box-sizing: border-box;
}
ul li:hover{ /*transform: rotate(0deg);*/
/*transform: none;*/ transform: scale(1.5);
//之前的旋转被层叠掉, 只执行放大
z-index: 998;
//显示在最上面
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>Ich glaube, Sie haben das gemeistert Nachdem Sie den Fall in diesem Artikel gelesen haben, lesen Sie bitte die anderen verwandten Themen im Artikel zur chinesischen PHP-Website.
Empfohlene Lektüre:
Das Layout von Webseiten und Clearing-Floats
Das Layout von Webseiten und Floating
Das obige ist der detaillierte Inhalt von2D-Konvertierungsmodul in HTML und CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
