Heim > Artikel > Web-Frontend > Welche Eigenschaften hat die CSS3-Transformation?
Welche Eigenschaften hat die CSS3-Transformation?
- 青灯夜游Original
- 2022-01-13 14:12:381595Durchsuche
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> |
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!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn