Heim > Artikel > Web-Frontend > Einfache Implementierung von CSS-Übergängen und 3D-Effekten

Einfache Implementierung von CSS-Übergängen und 3D-Effekten

不言Original: 2018-06-20 16:15:411698Durchsuche

Das Folgende ist eine einfache Implementierung des CSS-Übergangs + 3D-Effekts. Der Inhalt ist recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden.

Einfache Implementierung von CSS-Übergang + 3D-Effekt

<!DOCTYPE html>
<html>
<head>
<title>guodu</title>
<meta charset="utf-8">
<style type="text/css">
#wp{   
border: 1px solid red;   
width: 500px;   
height: 500px;   
background-color: pink;   
color: lime;   
transition-property: background color;   
transition-duration: 5s;   
transition-timing-function: cubic-bezier(0 0 0.2 0.2);   
transition-delay: 1s;   
transform: perspective(600px);   
}   
#wp:hover{   
background: red;   
color: white;   
width: 800px;   
transform-origin: (150px 100px 120px);   
transform: skewY(80deg) rotate(45deg) translate(50%) ;   
}   
</style>
</head>
<body>
<p id="wp"><h1>南海是中国的，菲律宾也是中国的</h1></p>
</body>
</html>

Das Obige ist der gesamte Inhalt davon Ich hoffe, dass der Artikel für das Lernen aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

Über die Methode zum Löschen von Floating Collapse in CSS

So implementieren Sie APPLE TV-Poster basierend auf CSS3- und jQuery-Parallax-Effekt

Das obige ist der detaillierte Inhalt vonEinfache Implementierung von CSS-Übergängen und 3D-Effekten. 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

Vorheriger Artikel：So löschen Sie den schwebenden Kollaps in CSSNächster Artikel：So löschen Sie den schwebenden Kollaps in CSS

In Verbindung stehende Artikel

Mehr sehen