Home > Article > Web Front-end > Simple implementation of css transition and 3D effects
Simple implementation of css transition and 3D effects
- 不言Original
- 2018-06-20 16:15:411741browse
The following is a simple implementation of css transition 3D effect. The content is quite good, so I will share it with you now and give it as a reference.
Simple implementation of css transition 3D effect
##
<!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>The above is the entire content of this article, I hope it will be useful to Everyone’s learning is helpful. For more related content, please pay attention to the PHP Chinese website! Related recommendations:
About the method of clearing floating collapse in css
How to implement APPLE TV poster based on CSS3 and jQuery The effect of parallax
The above is the detailed content of Simple implementation of css transition and 3D effects. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to clear floating collapse in cssNext article：How to clear floating collapse in css