Maison > Article > interface Web > Implémentation simple de la transition CSS et des effets 3D

Implémentation simple de la transition CSS et des effets 3D

不言original: 2018-06-20 16:15:411745parcourir

Ce qui suit est une implémentation simple de la transition CSS + effet 3D. Le contenu est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence.

Implémentation simple de la transition CSS + effet 3D

<!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>

Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos de la méthode de suppression de l'effondrement flottant en CSS

Comment implémenter l'affiche APPLE TV basée sur Effet CSS3 et jQuery Parallax

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment effacer l'effondrement flottant en CSSArticle suivant：Comment effacer l'effondrement flottant en CSS

Articles Liés

Voir plus