구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circle Hover Effect</title>
<link rel="shortcut icon" href="imgs/favicon.ico">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/circle04.css">
</head>
<body>
<ul class="ch-grid">
<li>
<div class="ch-item ch-bg-1">
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-bg-1"></div>
<div class="ch-info-back">
<h3>bear poster</h3>
<p>by Jonathan<a href="#">more</a></p>
</div>
</div><!-- end:ch-info -->
</div><!-- end:ch-info-wrap -->
</div><!-- end:ch-item -->
</li>
<li>
<div class="ch-item ch-bg-2">
<div class="ch-info-wrap">
<div class="ch-info2">
<div class="ch-info-front ch-bg-2"></div>
<div class="ch-info-back">
<h3>dri poster</h3>
<p>by Jonathan<a href="#">more</a></p>
</div>
</div><!-- end:ch-info -->
</div><!-- end:ch-info-wrap -->
</div><!-- end:ch-item -->
</li>
<li>
<div class="ch-item ch-bg-3">
<div class="ch-info-wrap">
<div class="ch-info3">
<div class="ch-info-front ch-bg-3"></div>
<div class="ch-info-back">
<h3>devi poster</h3>
<p>by Jonathan<a href="#">more</a></p>
</div>
</div><!-- end:ch-info -->
</div><!-- end:ch-info-wrap -->
</div><!-- end:ch-item -->
</li>
</ul>
</body>
</html>
RESET
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;700&family=Open+Sans:wght@300;600&display=swap');
/*font-family: 'Merriweather', serif; font-family: 'Open Sans', sans-serif;*/
* {margin:0; padding:0; box-sizing:border-box;}
body {
font-family: 'Open Sans', sans-serif; font-size:15px; color:#333;font-weight:300; background:url(../imgs/circle/bg.jpg);
}
h1,h2,h3,h4,h5,h6 {
font-family: 'Merriweather', serif; font-weight:700;
text-transform:uppercase;
}
ul li {float:left; list-style:none;}
a {display:block; text-decoration:none; border:0; outline:0;}
.ch-grid {width:780px; margin:100px auto; text-align:center;}
.ch-grid::after {clear:both;}
.ch-grid li {width:220px; height:220px; margin:0 20px;}
CSS
@charset "utf-8";
.ch-item {
position:relative; width:100%; height:100%; border-radius:50%;
box-shadow:0 2px 3px rgba(0,0,0,0.3);
}
.ch-info-wrap, .ch-info, .ch-info > div, .ch-info-back h3, .ch-info-back p, .ch-info2, .ch-info2 > div, .ch-info3, .ch-info3 > div {position:absolute;}
.ch-info-wrap {
left:20px; top:20px; width:180px; height:180px; border-radius:50%;
background:url(../imgs/circle/bg.jpg);
box-shadow:0 0 0 20px rgba(255,255,255,0.2),
0 0 10px rgba(115,115,25,0.8);
perspective:800px; /*z 축 원근감(회전하는 반경)을 지정: 수치가 낮을 수록 왜곡이 심해진다.*/
transition:all 0.6s ease;
}
.ch-info, .ch-info > div, .ch-info2, .ch-info2 > div, .ch-info3, .ch-info3 > div {width:100%; height:100%; border-radius:50%;}
/*===== .ch-info =====*/
.ch-info {
transform-style:preserve-3d;
/*자식요소에 부모요소에 적용한 perspective를 전달한다. 부모 요소에 perspective 속성을 사용해도 손자에게는 적용되지 않으므로 손자 요소까지 perspective 속성을 유지시켜주는 transform-style 속성을 작성한다.*/
transition:all 0.4s ease-in;
}
.ch-info > div {
color:#FFF;
backface-visibility:hidden; /*박스의 뒷면을 안보이게 설정*/
-webkit-backface-visibility:hidden; /*safari, chrome*/
-moz-backface-visibility:hidden; /*firefox*/
-ms-backface-visibility:hidden; /*Microsoft Edge, IE*/
-o-backface-visibility:hidden; /*opera*/
}
.ch-info .ch-info-back {
background:#000;
transform:rotate3d(0,1,0,180deg);
}
.ch-info .ch-info-back h3 {top:45px; width:100%;}
.ch-info .ch-info-back p {
top:90px; width:100%; padding:20px 0;
font-size:13px; border-top:1px dashed rgba(255,255,255,0.4);
}
.ch-info .ch-info-back p a {
padding-top:10px; color:#FFF222; font-weight:600;
text-transform:uppercase;
}
.ch-info .ch-info-back p a:hover {color:#FC0;}
/*.ch-item:hover*/
.ch-item:hover .ch-info {transform:rotate3d(0,1,0,-180deg);}
.ch-item:hover .ch-info-wrap {
box-shadow:0 0 0 2px rgba(255,255,255,0.6),
0 0 20px rgba(115,115,25,0.4);
}
/*===== .ch-info2 =====*/
.ch-info2 .ch-info-front {transition:all 0.4s ease;}
.ch-info2 .ch-info-back {
color:#F8F8F8; background:#000;
transform:scale(2.5); opacity:0;
transition:all 0.2s ease-in 0.3s;
}
.ch-info2 .ch-info-back h3, .ch-info2 .ch-info-back p {width:100%;}
.ch-info2 .ch-info-back h3 {top:45px; font-size:18px;}
.ch-info2 .ch-info-back p {
top:90px; padding:20px 0; font-size:13px;
border-top:1px dashed rgba(255,255,255,0.4);
}
.ch-info2 .ch-info-back p a {
padding-top:10px; color:#FFF222; font-weight:600;
text-transform:uppercase;
}
.ch-info2 .ch-info-back p a:hover {color:#FC0;}
/*.ch-item:hover*/
.ch-item:hover .ch-info2 .ch-info-front {transform:scale(0); opacity:0;}
.ch-item:hover .ch-info2 .ch-info-back {transform:scale(1); opacity:1;}
/*===== .ch-info3 =====*/
.ch-info3 {transform-style:preserve-3d;}
.ch-info3 .ch-info-front {
transform-origin:50% 100%; /*박스의 기준점을 변경*/
transition:all 0.4s ease; z-index:9;
}
.ch-info3 .ch-info-back {
color:#F8F8F8; background:rgba(0,50,255,0.4);
}
.ch-info3 .ch-info-back h3, .ch-info3 .ch-info-back p {width:100%;}
.ch-info3 .ch-info-back h3 {top:45px; font-size:18px;}
.ch-info3 .ch-info-back p {
top:90px; padding:20px 0; font-size:13px;
border-top:1px dashed rgba(255,255,255,0.4);
}
.ch-info3 .ch-info-back p a {
padding-top:10px; color:#FFF222; font-weight:600;
text-transform:uppercase;
}
.ch-info3 .ch-info-back p a:hover {color:#FC0;}
/*.ch-item:hover*/
.ch-item:hover .ch-info3 .ch-info-front {transform:rotate3d(1,0,0,-180deg);}
.ch-bg-1 {background:url(../imgs/circle/10.jpg) no-repeat center center;}
.ch-bg-2 {background:url(../imgs/circle/11.jpg) no-repeat center center;}
.ch-bg-3 {background:url(../imgs/circle/12.jpg) no-repeat center center;}'CSS' 카테고리의 다른 글
| 써클하버이벤트(3) (0) | 2022.11.18 |
|---|---|
| 써클하버이벤트(2) (0) | 2022.11.18 |
| 써클하버이벤트(1) (0) | 2022.11.18 |
| 아코디언 메뉴 (0) | 2022.11.18 |
| 탭버튼 (0) | 2022.11.18 |