Home >Web Front-end >CSS Tutorial >Simple implementation of css transition and 3D effects

Simple implementation of css transition and 3D effects

不言
不言Original
2018-06-20 16:15:411785browse

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