CSS3으로 3디텍스트애니 작성하기 정보
기타 CSS3으로 3디텍스트애니 작성하기본문
오늘은 CSS3으로 3디텍스트 구현해보렵니다.
풀소스는 https://codepen.io/web-tiki/pen/azeKNy 에서 바로 확인가능합니다.
마우스를 HOVER위에 옮기면 글짜가 각도변환되어 3디이펙트를 보여줍니다.
HTML
<div id="title">
<h1 data-content="HOVER">HOVER</h1>
</div>
CSS
*{margin:0;padding:0;}
html,body{height:100%;width:100%;overflow:hidden;background:#0099CC;}
#title{
position:absolute;
top:50%; left:50%;
transform:translate(-50%,-50%);
perspective-origin:50% 50%;
perspective:300px;
}
h1{
text-align:center;
font-size:12vmin;
font-family: 'Open Sans', sans-serif;
color:rgba(0,0,0,0.8);
line-height:1em;
transform:rotateY(50deg);
transition:transform 2s;
perspective:150px;
perspective-origin:0% 50%;
}
h1:hover{
transform:rotateY(-20deg);
}
h1:after{
content:attr(data-content);
position:absolute;
left:0;top:0;
transform-origin:50% 100%;
transform:rotateX(-90deg);
color:#0099CC;
}
#title:before{
content:'';
position:absolute;
top:-150%; left:-25%;
width:180%; height:328%;
background:rgba(255,255,255,0.7);
transform-origin: 0 100%;
transform: translatez(-200px) rotate(40deg) skewX(35deg);
border-radius:0 0 100% 0;
animation:light 5s;
}
@keyframes light{
from{opacity:0;}
to{opacity:1;}
}
추천
0
0
댓글 2개
오~! 찾고 있었는데 감사합니다.
@식물집사 댓글 감사합니다