Web-Frontend
Front-End-Fragen und Antworten
Welche Attribute werden verwendet, um Rotationseffekte in CSS3 zu erzielen?
Welche Attribute werden verwendet, um Rotationseffekte in CSS3 zu erzielen?
Das Attribut, das in CSS3 einen Rotationseffekt erzielt, ist „transformieren“. Das Transformationsattribut wird verwendet, um eine 2D- oder 3D-Transformation auf ein Element anzuwenden. Eine Drehung kann erreicht werden, wenn es mit den Funktionen „rotate()“, „rotate3d()“, „rotateX()“, „rotateY()“ oder „rotateZ()“ verwendet wird.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Das Attribut, das in CSS3 einen Rotationseffekt erzielt, ist „transformieren“. Das Attribut
transform wird verwendet, um eine 2D- oder 3D-Transformation auf ein Element anzuwenden. Wenn dieses Attribut zusammen mit der folgenden Funktion verwendet wird, kann die Elementrotation erreicht werden:
rotate(angle) Definieren Sie die 2D-Rotation und geben Sie an Winkel in den Parametern.
rotate3d(x,y,z,angle) definiert die 3D-Rotation.
rotateX(angle) Definiert eine 3D-Rotation entlang der X-Achse.
rotateY(angle) Definiert die 3D-Rotation entlang der Y-Achse.
rotateZ(angle) Definiert die 3D-Rotation entlang der Z-Achse.
Beispiel 1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div
{
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello</div>
</body>
</html>
Beispiel 2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
*,
*:after,
*:before {
box-sizing: border-box;
}
body {
background: #F5F3F4;
margin: 0;
padding: 10px;
font-family: 'Open Sans', sans-serif;
text-align: center;
}
h1 {
color: #4c4c4c;
font-weight: 600;
border-bottom: 1px solid #ccc;
}
h2,
h4 {
font-weight: 400;
color: #4d4d4d;
}
.card {
display: inline-block;
margin: 10px;
background: #fff;
padding: 15px;
min-width: 200px;
box-shadow: 0 3px 5px #ddd;
color: #555;
}
.card .box {
width: 100px;
height: 100px;
margin: auto;
background: #ddd;
cursor: pointer;
box-shadow: 0 0 5px #ccc inset;
}
.card .box .fill {
width: 100px;
height: 100px;
position: relative;
background: #03A9F4;
opacity: .5;
box-shadow: 0 0 5px #ccc;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.card p {
margin: 25px 0 0;
}
.rotate:hover .fill {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.rotateX:hover .fill {
-webkit-transform: rotateX(45deg);
transform: rotateX(45deg);
}
.rotateY:hover .fill {
-webkit-transform: rotateY(45deg);
transform: rotateY(45deg);
}
.rotateZ:hover .fill {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.scale:hover .fill {
-webkit-transform: scale(2, 2);
transform: scale(2, 2);
}
.scaleX:hover .fill {
-webkit-transform: scaleX(2);
transform: scaleX(2);
}
.scaleY:hover .fill {
-webkit-transform: scaleY(2);
transform: scaleY(2);
}
</style>
</head>
<body>
<h1 id="CSS-nbsp-元素旋转">CSS3 元素旋转</h1>
<!-- Rotate-->
<div class="card">
<div class="box rotate">
<div class="fill"></div>
</div>
<p>rotate(45deg) </p>
</div>
<div class="card">
<div class="box rotateX">
<div class="fill"></div>
</div>
<p>rotateX(45deg)</p>
</div>
<div class="card">
<div class="box rotateY">
<div class="fill"></div>
</div>
<p>rotateY(45deg)</p>
</div>
<div class="card">
<div class="box rotateZ">
<div class="fill"></div>
</div>
<p>rotateZ(45deg) </p>
</div>
</body>
</html>
(Lernvideo-Sharing: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonWelche Attribute werden verwendet, um Rotationseffekte in CSS3 zu erzielen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1664
14
1423
52
1317
25
1268
29
1243
24
Wie erzielt man mit reinem CSS3 einen Welleneffekt? (Codebeispiel)
Jun 28, 2022 pm 01:39 PM
Wie erzielt man mit reinem CSS3 einen Welleneffekt? In diesem Artikel erfahren Sie, wie Sie mit SVG- und CSS-Animationen Welleneffekte erstellen.
Verwenden Sie CSS geschickt, um verschiedene seltsam geformte Schaltflächen zu realisieren (mit Code).
Jul 19, 2022 am 11:28 AM
Dieser Artikel zeigt Ihnen, wie Sie mithilfe von CSS auf einfache Weise verschiedene seltsam geformte Schaltflächen realisieren können, die häufig vorkommen. Ich hoffe, dass er Ihnen hilfreich sein wird!
So verwenden Sie CSS, um den rotierenden Hintergrundanimationseffekt von Elementen zu erzielen
Nov 21, 2023 am 09:05 AM
Wie man mit CSS rotierende Hintergrundbildanimationseffekte von Elementen implementiert, kann die visuelle Attraktivität und das Benutzererlebnis von Webseiten erhöhen. In diesem Artikel wird erläutert, wie Sie mithilfe von CSS den rotierenden Hintergrundanimationseffekt von Elementen erzielen, und es werden spezifische Codebeispiele bereitgestellt. Zuerst müssen wir ein Hintergrundbild vorbereiten, das ein beliebiges Bild sein kann, beispielsweise ein Bild der Sonne oder eines elektrischen Ventilators. Speichern Sie das Bild und nennen Sie es „bg.png“. Erstellen Sie als Nächstes eine HTML-Datei, fügen Sie der Datei ein div-Element hinzu und legen Sie es auf fest
So verstecken Sie Elemente in CSS, ohne Platz zu beanspruchen
Jun 01, 2022 pm 07:15 PM
Zwei Methoden: 1. Fügen Sie mit dem Anzeigeattribut einfach den Stil „display:none;“ zum Element hinzu. 2. Verwenden Sie die Attribute „position“ und „top“, um die absolute Positionierung des Elements festzulegen, um das Element auszublenden. Fügen Sie dem Element einfach den Stil „position:absolute;top:-9999px;“ hinzu.
So implementieren Sie Spitzenränder in CSS3
Sep 16, 2022 pm 07:11 PM
In CSS können Sie das Attribut „border-image“ verwenden, um einen Spitzenrand zu erzielen. Das Attribut „border-image“ kann Bilder zum Erstellen von Rändern verwenden, d. h. zum Hinzufügen eines Hintergrundbilds zum Rand. Sie müssen lediglich das Hintergrundbild als Spitzenstil angeben Bildrandbreite nach innen. Ob der Anfang wiederholt wird;".
Es zeigt sich, dass Textkarussell und Bildkarussell auch mit reinem CSS realisierbar sind!
Jun 10, 2022 pm 01:00 PM
Wie erstelle ich ein Textkarussell und ein Bildkarussell? Das erste, woran jeder denkt, ist die Verwendung von js. Tatsächlich können Textkarussell und Bildkarussell auch einen Blick auf die Implementierungsmethode werfen.
So drehen Sie Word-Bilder
Mar 19, 2024 pm 06:16 PM
Wenn wir die Word-Office-Software zur Dokumentenverarbeitung verwenden, müssen wir häufig einige Bilder und andere Materialien in das Dokument einfügen. Um jedoch ein schönes Layout zu erzielen, müssen wir auch ein spezielles Layout für die Bilder durchführen, darunter auch die Rotationsverarbeitung Die grundlegendste Schriftsatzverarbeitung ist jedoch für einige Neulinge am Arbeitsplatz, die gerade erst mit der Office-Software Word in Berührung gekommen sind, möglicherweise nicht in der Lage, Bilder in Word-Dokumenten zu verarbeiten. Im Folgenden erfahren Sie, wie Sie Bilder in Word drehen. Wir hoffen, dass es für Sie hilfreich und inspirierend ist. 1. Zuerst öffnen wir ein Word-Dokument und klicken dann auf die Schaltfläche „Bild einfügen“ in der Menüleiste, um ein zufälliges Bild auf dem Computer einzufügen, um unsere Bedienung und Demonstration zu erleichtern. 2. Wenn wir das Bild drehen möchten, müssen wir dies tun
Wie komprimiere und formatiere ich Bilder in Vue?
Aug 25, 2023 pm 11:06 PM
Wie komprimiere und formatiere ich Bilder in Vue? Bei der Frontend-Entwicklung müssen wir häufig Bilder komprimieren und formatieren. Besonders in der mobilen Entwicklung ist es wichtig, Bilder zu komprimieren und zu formatieren, um die Seitenladegeschwindigkeit zu verbessern und Benutzerverkehr zu sparen. Im Vue-Framework können wir einige Werkzeugbibliotheken zum Komprimieren und Formatieren von Bildern verwenden. Komprimierung mithilfe der Kompressor.js-Bibliothek compress.js ist ein JavaS zum Komprimieren von Bildern
