https://www.rarebeef.co.kr/
태그 목록
- 전체보기(196)
- TIL(85)
- project(71)
- sql(47)
- datacamp(33)
- python(29)
- dashboard(18)
- Data Analyst(16)
- 코드스테이츠(12)
- React(12)
- 블로그(10)
- Datastudio(9)
- js(8)
- data(7)
- front end(7)
- query(7)
- JavaScript(7)
- CSS(6)
- nextjs(5)
- html(5)
- programmers(5)
- Cheat Sheet(5)
- tableau(4)
- 첫 프로젝트(4)
- office hour(4)
- 유어클래스(3)
- 데이터 분석가(3)
- analysis(3)
- redux(3)
- game(3)
- JOIN(3)
- scss(3)
- typescript(3)
- league of legends(2)
- Firebase(2)
- Visualize(2)
- steam(2)
- 3D(2)
- logo(2)
- 블로깅(2)
- 관계형 데이터베이스(2)
- slide(2)
- 인사이트(2)
- 오피스아워(2)
- BigQuery(2)
- pwa(2)
- ESLint(2)
- frontend(2)
- error(2)
- KPI(2)
- 데이터(2)
- OfficeHour(2)
- da(1)
- 타입스크립트(1)
- next-pwa(1)
- google sheet(1)
- webpack(1)
- 벨로그(1)
- 시퀄(1)
- next(1)
- baekjoon(1)
- application(1)
- Rainbow Six Siege(1)
- sns(1)
- react-query(1)
- 데이터베이스(1)
- State(1)
- The rare beef(1)
- 예외처리(1)
- Sass(1)
- 정육면체(1)
- tailwindCSS(1)
- 게임 배급사(1)
- RAREBEEF(1)
- Data Table(1)
- JS 시계(1)
- 구글docs(1)
- ngrok(1)
- 시계(1)
- insight(1)
- proptypes(1)
- react native(1)
- crawl(1)
- ds(1)
- Illustrator(1)
- Crawling(1)
- Feedback(1)
- icon(1)
- next.js(1)
- next js(1)
- Database(1)
- regexp(1)
- Map(1)
- columns(1)
- Data Literacy(1)
- scrollTo(1)
- CUBE(1)
- 데이터 분석(1)
- 시간(1)
- Date(1)
- OT(1)
- 상태관리(1)
- Big query(1)
- kakao(1)
- vscode(1)
- netlify(1)
- self join(1)
- Data studio(1)
- date 객체(1)
- canvas(1)
- Auth(1)
- DE(1)
- scroll-snap(1)
- JS 시간(1)
- Relational Database(1)
- Data scientist(1)
- web(1)
- package(1)
- interactive(1)
- API(1)
- npm(1)
- 라이브러리(1)
- 데이터 사이언티스트(1)
- jupyter notebook(1)
- settings sync(1)
- 리액트(1)
- 쿼리(1)
- responsive(1)
- 게임 제작사(1)
- next/babel(1)
- nodejs(1)
- slider(1)
- 데이터 문해력(1)
- blender(1)
- 데이터 엔지니어(1)
- 리덕스(1)
- 지표(1)
- FCM(1)
- 데이터 테이블(1)
- Data Engineer(1)
- Rainbow Six(1)
- node.js(1)
- 과제(1)
전체보기 (196)TIL(85)project(71)sql(47)datacamp(33)python(29)dashboard(18)Data Analyst(16)코드스테이츠(12)React(12)블로그(10)Datastudio(9)js(8)data(7)front end(7)query(7)JavaScript(7)CSS(6)nextjs(5)html(5)programmers(5)Cheat Sheet(5)tableau(4)첫 프로젝트(4)office hour(4)유어클래스(3)데이터 분석가(3)analysis(3)redux(3)game(3)JOIN(3)scss(3)typescript(3)league of legends(2)Firebase(2)Visualize(2)steam(2)3D(2)logo(2)블로깅(2)관계형 데이터베이스(2)slide(2)인사이트(2)오피스아워(2)BigQuery(2)pwa(2)ESLint(2)frontend(2)error(2)KPI(2)데이터(2)OfficeHour(2)da(1)타입스크립트(1)next-pwa(1)google sheet(1)webpack(1)벨로그(1)시퀄(1)next(1)baekjoon(1)application(1)Rainbow Six Siege(1)sns(1)react-query(1)데이터베이스(1)State(1)The rare beef(1)예외처리(1)Sass(1)정육면체(1)tailwindCSS(1)게임 배급사(1)RAREBEEF(1)Data Table(1)JS 시계(1)구글docs(1)ngrok(1)시계(1)insight(1)proptypes(1)react native(1)crawl(1)ds(1)Illustrator(1)Crawling(1)Feedback(1)icon(1)next.js(1)next js(1)Database(1)regexp(1)Map(1)columns(1)Data Literacy(1)scrollTo(1)CUBE(1)데이터 분석(1)시간(1)Date(1)OT(1)상태관리(1)Big query(1)kakao(1)vscode(1)netlify(1)self join(1)Data studio(1)date 객체(1)canvas(1)Auth(1)DE(1)scroll-snap(1)JS 시간(1)Relational Database(1)Data scientist(1)web(1)package(1)interactive(1)API(1)npm(1)라이브러리(1)데이터 사이언티스트(1)jupyter notebook(1)settings sync(1)리액트(1)쿼리(1)responsive(1)게임 제작사(1)next/babel(1)nodejs(1)slider(1)데이터 문해력(1)blender(1)데이터 엔지니어(1)리덕스(1)지표(1)FCM(1)데이터 테이블(1)Data Engineer(1)Rainbow Six(1)node.js(1)과제(1)
[HTML, CSS, JS] 드래그로 회전 가능한 정육면체 만들기
https://codepen.io/RAREBEEF/pen/eYGKZKL JS와 CSS를 사용하여 기존에 만들던 것과는 다른 무언가를 만들어보고 싶었다. 3d로 무언가를 구현해보면 좋겠다는 생각이 들었는데, 처음엔 구체를 만들어볼까 했으나 표면이 꽉 채워진 구체는 현실적으로 구현하기가 어려울 것 같아서 무난하고 전체적으로 균형잡힌 정육면체를 제작해보기 했다. 1. 정육면체 구현 !codepen[RAREBEEF/embed/yLzEOaz?default-tab=html%2Cresult] 정육면체의 구현은 HTML 그리고 CSS 만으로 가능하다. HTML 축과 컨테이너 역할을 할 요소를 만들고 자식으로 정육면체의 각 면이 될 요소 6개를 생성한다. CSS 축과 컨테이너 역할을 할 요소에 transform-style: preserve-3d; 를 부여하여 3d 공간에 위치시킨다. 자식으로 들어있는 각 면들은 하나씩 차근차근 translateX, `trans
2022년 1월 5일
·
3개의 댓글·
29