본문 바로가기

rotate2

CSS - 뚜껑 열리는 링크 (메뉴) 3D Rotate 알아보다 줏은 아이 원래는 less 버전으로 되어 있던걸 일반 CSS 로 풀어보았음 내용은 별거 없고, 그림자 색상 맞추는게 까다로울뿐! 아래는 소스와 예시: See the Pen plain CSS link - with 3D lid by Alex Park (@alikong) on CodePen. https://codepen.io/alikong/pen/zYqYEwR 2020. 8. 5.
CSS - rotate 좌우/상하 뒤집기 (3D) CSS가 하도 좋아져서 다양한 애니메이션도 가능한데 항상 문제는 브라우저 호환! 마우스 올리면 휘릭 뒤집는건 rotateX 나 rotateY를 써서 쉽게 했는데.. 3D 로 보여지게 하려니 손이 좀 가고.. 특히 그냥 뒤집기만 하는게 아니라 뒤집으면서 뒷면에 있는게 앞으로 나오는 식으로 하려니 손이 더 가고.. 다 해놓고 보니 Edge 에선 뒷면이 안나오네! 그래서 알아보니 판을 통체로 하나만 돌리면 안되고 앞면 뒷면을 동시에 돌려줘야 한다니... 아래는 예시: (Result 탭을 눌러보자) https://jsfiddle.net/alikong/ac5ghs6p/ 암튼 해결! 2020. 8. 4.