Heim > Web-Frontend > Front-End-Fragen und Antworten > Welche Eigenschaften hat die CSS3-Transformation?

Welche Eigenschaften hat die CSS3-Transformation?

青灯夜游
Freigeben: 2022-01-13 14:12:38
Original
1613 Leute haben es durchsucht

Es gibt 6 CSS3-Transformationsattribute: 1. transform-origin; 3. perspective-origin;

Welche Eigenschaften hat die CSS3-Transformation?

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.

Welche Eigenschaften hat die CSS3-Transformation?... oder 3D transformiert

3

transform-origin ermöglicht das Ändern der Position von Transformationselementen3transform-styleAngeben, wie Elemente im 3D-Raum verschachtelt werden3PerspektiveAngeben, wie 3D-Elemente angezeigt werden perspective 3perspective-originGeben Sie die untere Position von 3D-Elementen an3backface-visibilityDefiniert, ob ein Element sichtbar sein soll, wenn es nicht auf den Bildschirm gerichtet ist3 Beispiel: Erweiterte Kenntnisse: FunktionBeschreibung
<!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
2D-Konvertierungsmethode


Matrix(

n Welche Eigenschaften hat die CSS3-Transformation?,

n

, n,

n

,

n,n) definiert eine 2D-Transformation unter Verwendung einer Matrix aus sechs Werten. translate( definiert eine 2D-Transformation, die Elemente entlang der X-Achse verschiebt. translateY(scale(x, definiert eine 2D-Skalierungstransformation, die die Breite und Höhe eines Elements ändert. scaleX( definiert eine 2D-Skalierungstransformation, die die Breite eines Elements ändert. scaleY(rotate(angle)skew(x-angle, definiert eine 2D-Skew-Transformation entlang der X- und Y-Achse. skewX( definiert eine 2D-Schrägtransformation entlang der X-Achse. skewY(nn ,,,n,,,n,
x,y) definiert eine 2D-Transformation, die das Element entlang der X- und Y-Achse bewegt. translateX(n)
n) definiert eine 2D-Transformation, die Elemente entlang der Y-Achse verschiebt.
y)
n)
n) definiert eine 2D-Skalierungstransformation, die die Höhe des Elements ändert.
definiert die 2D-Rotation und gibt den Winkel in den Parametern an.
y-angle)
angle)
angle) definiert eine 2D-Schrägtransformation entlang der Y-Achse. 3D-Konvertierungsmethode, Funktion, Beschreibung, Matrix3d ​​,,
n,nn
n,nn
n

)

definieren Sie die 3D-Transformation unter Verwendung von 16 Werten 4x4 Matrix. translate3d(,y,yz)yz,Angleangle definiert eine 3D-Rotation entlang der X-Achse. angle definiert eine 3D-Rotation entlang der Y-Achse. angle definiert eine 3D-Rotation entlang der Z-Achse. n Definiert die perspektivische Ansicht eines 3D-transformierten Elements.
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,
,
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,,
)3D-Rotation definieren. rotateX()
rotateY()
rotateZ()
perspective()
(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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage