Es gibt 6 CSS3-Transformationsattribute: 1. transform-origin; 3. perspective-origin;
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
CSS3-Transformationen können Elemente verschieben, skalieren, drehen, verlängern oder strecken.
3
| 3 | transform-style | |
|---|---|---|
| 3 | Perspektive | |
| 3 | perspective-origin | |
| 3 | backface-visibility | |
| 3 | ||
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<style type="text/css">
#rotate2D, #rotate3D {
width: 80px;
height: 70px;
color: white;
font-weight: bold;
font-size: 15px;
padding: 10px;
float: left;
margin-right: 50px;
border-radius: 5px;
border: 1px solid #000000;
background: red;
margin: 10px;
transition:transform 2s;
-webkit-transition:transform 2s; /* Safari */
}
#rotate2D:hover{
transform: rotate(180deg);
}
#rotate3D:hover{
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div id="rotate2D">2D 转换</div>
<div id="rotate3D">3D 转换</div>
</body>
</html>Nach dem Login kopieren |
Erweiterte Kenntnisse: | |
| 2D-Konvertierungsmethode | Funktion |
n 
,
, n,
n,
n| definiert eine 2D-Transformation unter Verwendung einer Matrix aus sechs Werten. | |
|---|---|
| x,y) definiert eine 2D-Transformation, die das Element entlang der X- und Y-Achse bewegt. translateX(n) | definiert eine 2D-Transformation, die Elemente entlang der X-Achse verschiebt.|
| n) definiert eine 2D-Transformation, die Elemente entlang der Y-Achse verschiebt. | scale( |
| y) | definiert eine 2D-Skalierungstransformation, die die Breite und Höhe eines Elements ändert.|
| n) | definiert eine 2D-Skalierungstransformation, die die Breite eines Elements ändert.|
| n) definiert eine 2D-Skalierungstransformation, die die Höhe des Elements ändert. | rotate( |
| definiert die 2D-Rotation und gibt den Winkel in den Parametern an. | skew( |
| y-angle) | definiert eine 2D-Skew-Transformation entlang der X- und Y-Achse.|
| angle) | definiert eine 2D-Schrägtransformation entlang der X-Achse.|
| angle) definiert eine 2D-Schrägtransformation entlang der Y-Achse. 3D-Konvertierungsmethode, Funktion, Beschreibung, Matrix3d , | n, |
| n,n | ,n | ,
| n,n | ,n | ,
)
| translate3d( | x | ,
|---|---|
| z)3D-Transformation definieren. translateX(x) definiert eine 3D-Übersetzung, wobei nur der für die X-Achse verwendete Wert verwendet wird. translateY(y) definiert eine 3D-Übersetzung, wobei nur der für die Y-Achse verwendete Wert verwendet wird. translateZ(z) Definiert eine 3D-Übersetzung, wobei nur der für die Z-Achse verwendete Wert verwendet wird. scale3d(x, | y, | z
| Definieren Sie die 3D-Skalierungstransformation. scaleX(x) | definiert eine 3D-Skalierungstransformation bei gegebenem X-Achsenwert. |
| scaleY(y) | definiert eine 3D-Skalierungstransformation bei gegebenem Y-Achsenwert. |
| scaleZ(z) | definiert eine 3D-Skalierungstransformation bei gegebenem Z-Achsen-Wert. |
| rotate3d(x, | y, | z
| )3D-Rotation definieren. rotateX( | angle) |
| rotateY( | angle) |
| rotateZ( | angle) |
| perspective( | n) |
| (Lernvideo-Sharing: CSS-Video-Tutorial) |
Das obige ist der detaillierte Inhalt vonWelche Eigenschaften hat die CSS3-Transformation?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
CSS3-Tutorial
Was sind die CSS3-Gradienteneigenschaften?
Git-Befehl
Einführung in Artikel-Tag-Attribute
So lösen Sie das Problem, dass der DNS-Server nicht reagiert
Was bedeutet USB-Schnittstelle?
So lösen Sie verstümmelten SecureCRT-Code
Vorstellung von Dienstleistern mit kostengünstigen Cloud-Server-Preisen
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
