SeaPlus

[구현] 1. Card 요소들을 3D 로 구현한다. [transform-style] 3D공간에서 변경된 3차원 좌표를 하위 자식요소에게 전달할 것인지의 여부를 결정하는 속성 flat 하위요소들은 상위요소늬 3D좌표와 상관없이 2D영역에 표시된다. preserve-3d 부모요소의 3D 좌표를 전달받아 3D 형태로 표현된다. 자식요소 중 3D로 표현하고싶은 요소가 있다면 부모요소는 반드시 "preserve-3d" 를 이용해야 한다!! [translate3d] 3d로 표현하기 위해 현재 위치에서 해당 요소를 주어진 x축, y축 , z축 의 거리만큼 이동시킨다. perpective(): 메소드를 사용하여 원근감을 표현가능하다. transform: perspective(500px) translate3d(0, 0,..

[구현] 1. 배경의 원형 모양은 "가상선택자" 를 이용해 구현 circle 요소를 만든뒤 "circle::before" 일때 원형 모양 "circle:hover:before" 일때 card 모양 으로 구현 /* 원형 effect를 적용하기 위한 요소 */ .card .circle { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 20px; overflow: hidden; } .card .circle::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #d83133; /* 원형모양 */ ..

[구현] 1. HTML & CSS clip-path 와 hover effect를 적용할 카드를 마크업 하고 css로 스타일링을 한다. 2. clip-path .container .card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #9bdc28; clip-path: circle(160px at 80% 20%); transition: 0.5s ease-in-out; } .container .card:hover:before { clip-path: circle(310px at 80% -20%); } 요소의 모양을 clip-path를 통해 평상시는 circle(160p..