답변 2개
채택된 답변
+20 포인트
3년 전
사이트는 fullpage 사용했고
이미지 펼침 효과는 css transform-style: preserve-3d; 같은거 활용한듯하네요
</p>
<p>.flip-wrap .flip.active {</p>
<ol role="tree">
<li role="treeitem"><input aria-label="transform rotateX(0deg)" type="checkbox" /> transform: rotateX(
<p>0deg</p>
);</li>
</ol>
<p>}</p>
<p><button aria-label="아래에 스타일 규칙 삽입" tabindex="-1" title="아래에 스타일 규칙 삽입"></button></p>
<p>main.css:276</p>
<p>.flip-wrap .flip {</p>
<ol role="tree">
<li role="treeitem"><input aria-label="display flex" type="checkbox" /> display: flex;<button tabindex="0" title="flexbox 편집기 열기"></button></li>
<li role="treeitem"><input aria-label="width 100%" type="checkbox" /> width: 100%;</li>
<li role="treeitem"><input aria-label="transform-origin 0 0" type="checkbox" /> transform-origin: 0 0;</li>
<li role="treeitem"><input aria-label="backface-visibility hidden" type="checkbox" /> backface-visibility: hidden;</li>
<li role="treeitem"><input aria-label="transform-style preserve-3d" type="checkbox" /> transform-style: preserve-3d;</li>
<li role="treeitem"><input aria-label="transform rotateX(-180deg)" type="checkbox" /> transform: rotateX(
<p>-180deg</p>
);</li>
<li aria-expanded="false" role="treeitem"><input aria-label="transition all .8s ease-out" type="checkbox" /> transition: all .8s ease-out;</li>
</ol>
<p>}</p>
<p>
active 활성화 되면 transform 스타일 변경되는효과인듯요
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인