4 글 보임 - 1 에서 4 까지 (총 4 중에서)
-
완전 동일하게 했는데 안되네요. 아래가 결과입니다. 글자 baseline 문제 같은데.. height, line-height, vertical-align:middle 같은것도 다 해봤는데 정중앙에 안되네요. 노멀라이즈 ( normalize.css v8.0.1 ) 도 적용했습니다. 회전하는데 + 의 위쪽 꼬다리 부분을 중심으로 회전하네요(도형의 가운데)
<link rel="stylesheet" type="text/css" href="normalize.css"/>
<style type="text/css">
.content{
width: 100%;
text-align: center;
}
div{box-sizing: border-box;}
.plusIco{
margin: 150px auto;
text-align: center;
font-size: 70px;
width: 84px;
cursor: pointer;
background-color: #CCC;
}
.plusIco:hover{
animation-name: 크로스회전;
animation-duration: 0.7s;
animation-fill-mode: forwards;
}
@keyframes 크로스회전{
0% { transform: rotate(0deg) }
25% { transform: rotate(-15deg) }
100% { transform: rotate(45deg) scale(1.5)}
}
</style>
</head>
<body>
<div class="content">
<div class="plusIco">+</div>
</div>
</body>
</html>
4 글 보임 - 1 에서 4 까지 (총 4 중에서)
- 답변은 로그인 후 가능합니다.