집 >웹 프론트엔드 >CSS 튜토리얼 >CSS 전환 및 3D 효과의 간단한 구현

CSS 전환 및 3D 효과의 간단한 구현

不言원래의: 2018-06-20 16:15:411785검색

다음은 CSS 전환 + 3D 효과를 간단하게 구현한 것입니다. 내용이 꽤 괜찮아서 지금 공유해서 참고용으로 올려드리겠습니다.

CSS 전환 + 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>

위 내용은 모두의 학습에 도움이 되기를 바랍니다. PHP 중국어 웹사이트!

CSS 전환 및 3D 효과의 간단한 구현

관련 기사