실전 HTML5 & CSS3 동영상 강좌 제 25강 CSS3변환(Transform) > CSS

무료강좌-디비라

CSS

※ 가장 하단이 첫강좌입니다

Seoul Wiz | 실전 HTML5 & CSS3 동영상 강좌 제 25강 CSS3변환(Transform)

본문

※ 영상을 선명하게 보기 안내
  1. 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
  2. 팝업목록에서 "품질" 선택하세요.
  3. 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
Seoul Wiz님의 CSS강의 청각장애인을 위한 자막
15450302536041.jpg

 안녕하십니까 풀수 임자 자원을 25강 html css

25강 css 변환 트랜스폼 에 대해서 살펴보도록 하겠습니다
자지 지난 시간에 23강 에 알아봤던 트랜지션 아까 그 다음엔 24강
에서 알아봤던 애니메 전 키프레임 애니메이션과 연관지어서
어떤 css3 에서 어떠한 속성을 태그를 변환시키는 그런 기능입니다
그래서 저어 트렌디 정가 애니메이션과 연관지어서 여러분이 알아 주시면
되겠습니다
자 보시면 변한 속성 과거 자바스크립트에서 만
구현이 가능한 변한 트랜스폼
기능을 이제는 css3 에서도 구현이 가능합니다 이렇게 되어 있죠
그런데 먼저 우리가 지지난 신앙과 지나실 알아봤던 그 변환 그냥 트랜지션
과 애니메이션을 제가 설명 될 때
css3 에서요 기둥들을 과거의 지원하지 않았지만 그 최근에 css3 가
오면 쓰리 로 버전업이 되면서 지원을 하기 시작했는데
그래도 또 저 플래시나 아니면 자바 스크립트 또는 제이쿼리 등을 이용하는
방법보다 는 아직까지 기능이 약간 비파 다고 할 수 있습니다
자 그렇기 때문에 그렇게 많이 쓰이진 않고요 특정한 목적에서 간혹가다 알
수 있는 기능이기 때문에 여러분들이 부담 없이 그냥 한번 쭉 보시면 될
것 같습니다
자 변환 함수는 트랜 트랜 슬레이트 xy 이러한 함수들이 있구요
자 함수 변화 함수가 쭉 나와 있는데 트랜스 레이트 xy 의 xi 측으로
이동 시키는거 트랜스 latex x 축 이동 시키는거
자 이거는 예 트랜 슬레이트 y y 축으로 이동 시키는거 스케일의 x y
x 와의 같이 크기 조정 하는거 스케일 xi 의 x 쭉 크기 조정 하는거
y 축 크기 조정 하는거 자 스크린은 기울이는 거에요
사각형을 기울여서 평행 34화 평을 기울이면 안쪽 이렇게 스 튜브
기울이면 평행사변형 이 되겠죠 그럼 모양으로 스크류 기울기를 주는 겁니다
그래서 xy 같이 기울일 수도 있고 x 충만 기울일 수도 있구요
y 죽만 기울일 수도 있겠습니다 잘 로 데이트는 말 그대로 해 줘 난
내가 원하는 회장 하는 기능입니다
저래서 요것도 음 소스를 보면 여러분들이 금방 어 이런 기능이 구나 바로
캣츠 가 가능 할 거구요
그렇게 중요한 기능을 아니기 때문에 여러분들이 쉽게 그냥 가볍게 학습을
하시면 될 것 같습니다
자 이것을 미리보기 회복해야 브라우저에서 보기를 짝 눌러보면
음 이렇게 되어 있습니다 자 이게 어떻게 된 거냐면
자 이렇게 볼게요 자 먼저 dv 태그 갖고 이렇게 두개의 덩어리를 크게
나타났습니다 제 가족 공간을 좀 띄우려고
br 태그를 갱 태그를 좀 무쟈게 많이 되었구요
자 어쨌든 간에 큰 덩어리 두개가 보이구요 그 큰 덩어리 안에 또다른
dv 태그가 이렇게 나와있습니다
자 첫번째꺼 먼저 보면 콘텐츠의 렙 일이에요 그래서 여기 보면 콘텐츠를
의 제 트랜스폼 도 마찬가지로 진한색 마찬가지로 프리픽스 벤더 프리픽스
를 사용해야 됩니다 그래서 위의 명치를 해줬구요
아 다음에 컨텐츠 렙 1번
과로가 200 세로 가 200 입니다 다음에 두께보다 두께가 o 픽셀의
이러한 색상을 가지고 있습니다 줘 널 보면 포드 5 픽셀 라인 보이시죠
이렇게 라인이 있구요 잘해 b 를 감싸고 있는 아 대비 리 감싸고 있는
녀석은 예정
트랜 콘텐츠
트랜 이라는 녀석을 감싸고 있습니다 내가 이 안쪽에 녀석이죠
자 이 여성은 어떤 속성이 있냐면 가루가 200 세로 가입에 다음에
행위 이렇게 그해 눕히 가 라인 헤이트 가 2배 입니다
생 간격이 200 그래서 원래는 이런 거겠죠
뭐 좀 해볼까요 쳐보면
요런 모양입니다 요런 모양인데
로만 조금 때 볼까요
이런 모양이 겠죠 이런 모양인데
어 이런 모양 중심 맞구요 다음에 테스트 온라인 센터 가운데정렬 시키게
있구요
자매 백그라운드 칼라 주고 어퍼 이스트 가 0점 올해 요일이 일이다
보이는 거구요
노무라 상태이고 0.5 반만 투명에 만든 것이어서 투명 처리 되어
있습니다
여기다가 오늘 알아볼 이런걸 지금 트랜스폼 이란 속성을 주는 거에요
그래서 트랜스폼 속성의 로 테이트 45도 돌아라 사지 뭐 도핑을 좋겠죠
다음에 스크류 x 축으로 20 뚝 기울어져 라 스 켈 이는 뭐냐면 2배
크게 하는 거예요
이리 기본이구요 그래서 이루어 왔으니까 2배 커지는 겁니다 그래서 세
가지의 속성값을 줬어요
트랜스폼
자주와서 결과물 확인해 보니까 이렇게 되는 거겠죠
사이즈는 2배 커졌고 요 다음에 x 쪽으로 20도 기울인 거예요 그런가
약간 찌그러져 사각형이
만이가 이게 없으면 어떻게 되겠어요
없으면 이렇게 되겠죠 찌그러지지 않고 원래 정사 캠 그대로 나오겠죠
자 그래서 스쿨 을 이용해서 기울기로 줬더니 약간 찌그러진 모양이 그
나왔습니다
제가 어퍼 이스트 를 증거는 바깥에 레비 갖고 있던 보드 오피스 n
그대로 있죠
지금 트랜스폼을 증거는 콘텐츠 틀에 내에만 대개 만 중 거기 때문에 2녀
정말 이렇게 변화가 된 거겠죠
자 두번째 컨텐츠 랩 트입니다
자 예를 살펴보면 얘는 200 의 200 보도가 5 픽셀이 에요 그래서
이렇게 나와 있구요
다음에 안쪽에 있는 녀석을 보면 200 의 200 의 라이트 200을
좋구요
그 다음에 텍스트 온라인 센터 백그라운드를 누런색 에어퍼프 좋습니다
자 그 다음에 트랜스폼 에서 로 테이트 하고 스케일을 줬어요 스크랩
뺐어요
그래서 270도 돌아요 돌고 스케일도 0.5 커졌는데 자 밑에 보시면
트랜스폼 오리진 이라는 게 있어요 자 이건 뭐냐면
자 위쪽에 보면 얘가 커지거나 어떠한 돌때 중심이 원래 갖고 있던 중력
이었죠
자 중심 이동 시키는 거예요 그래서 중심을 타박 오라이트 자 원래 내가
갖고 있던 게
이걸 추적 3 먹어보면
자 여기 줘 이곳에 중심이 어디에 여기죠
여기서 여기서 만약에 회전을 시키고 스케일을 0.5 키웠어요 그러면
여기를 중심으로 해서 회장이 되니까
이렇게 되겠죠 215 들어가 생각해 나오겠죠
작은데 중심을 이동시켜 써요 중심을 탑 라이트 래요
상단 상당을 옮겼고 오른쪽으로 언급되어 여기 겠죠
여기를 기준으로 해서
원래 이게 이렇게 재울때 녀석인데
상단 오른쪽 오른쪽 상단 여기를 기준해서
210 또 가 삥 글 돌아가요 그리고 더 커집니다 이렇게 해주면
이러한 결과가 나올 수가 있겠죠 200c 돌아왔으니까 1번 2번 3번
90도 칡 3번 들어갔구요 그 다음에 사이즈가 여기를 기준해서
0 1.5 배 두 배가 아니라 일정 500 커진거 확인이 될 수가
있겠습니다
자 이렇게 트랜스폼 속성을 이용해서 어떤 로 테이트 스크류 sk 이렇게
속성을 한번에 주는 기능들
음 참고적으로 그냥 가볍게 알고 계시면 될 것 같습니다
자 그 다음에 또 이걸 보면 자 이거는 뭔지 또 볼까요
브라우저에서 보면 자 메뉴가 나올 텐데요 애 맨유 가 나오죠
자매 유다가 어
트랜스폼을 쫑쫑 좋다 다르게 조금 거에요 그래서 얘를 주면 확대 회전
이겠죠
스크류 겠죠 스크류 에다가 돌아가면서 회전이 되고 있죠
얘는 애니메이션이 되고 있습니다 용 복합적인 거로 쭉 다 같이 하나씩 조
보도록 하겠습니다 자 먼저 html 구조 를 보니까 랩으로 감싸 구요
그 다음엔 mb 가 있고 어 liter 리스트 태그의 이렇게 나와
있습니다
자 예를 먼저 만들기 위해서는
먼저 브라우저 중앙에 위치 를 하기 위해서 가로 800 에 새로 500의
마 진영 오토를 좋고요
그 다음에 ul 태그 배우고 li 태그는 플루트를 좋습니다
어 그래서 왼쪽 정렬이 대해서 수평 구조를 바꿔 같구요
오버플로 기장 조 되는데 다음에 더 이상 코드 없기 때문에 그냥 요구
이것만 표시해 주고 말았습니다
자 디스플레이 블록을 좋고 패딩 호의
상하 외의 좌우 64 10 좋습니다 그리고 백그라운드 는 이렇게 표시를
했습니다
자 이렇게 표시를 해놓고 나서
자 어 ul li 에다가 이제 구조 선택자 를 이용해서 첫 번째 여서 게
허벌 했을 때 두 번째 요소 개 오버 됐을 때 세 번째로 저게 호흡을
했을 때 다음의 네 번째 와서 거부했을 때 다섯 번째 덕에 후보 됐을 때
어떻게 변화가 되는지 다 값을 하신 넣어 준 겁니다
그래서 첫번째 여성을 먼저 보니까 첫번째 적은 백그라운드로 칼라 요걸로
변경 시킨 데요
백그라운드 컬러는 다 동일하네요 그러니까 여타 봉하고
자 트랜스포머 오늘 나오는 트랜스폼 기능입니다 트랜스폼을 얘는 스케일을
스케일을 2배를 늘린다는 얘기겠죠
다음에 트랜스와 오리진은 50% 에 영어 줬어요 자 이건 뭐냐면 첫
번째가 50% 102
원래 갖고 있던 사회적 중심이 문제의
얘를 가지고 50 50 만큼만 이동을 시키겠다는 얘기입니다
자 그래서 이거를 100으로 한번 바꿔 볼까요
좀 줘 보니까
좀 계획을 학교 교사
이렇게 2 보도록 하겠습니다
자 이 상태에서 위치를 100 으로 바꿔 보도록 하겠습니다
그러면 이렇게 됩니다 즉 가로 에서 50% 중심을 반만 이동 시킨 거예요
백이면 여기가 되겠죠 탑이 되겠죠 즉 우리 갈 기존의 방금 했던 예제에서
탑 이거 동일한 거겠죠
나는 받아 움직인 게 아니라 50% 반만 중심을 이동시켜 있다
그리고 새로 는 나 두겠다 해서 이렇게 줄면
결과가 이렇게 했습니다 쭉 중심 가운데를 중심으로 해서 이렇게 커질 수
있겠구요
자 제트 인덱스는 뭐냐면 다른 물체와의 상하 관계를 조정할 수가 있어요
제트 nx 가 높으면 높을수록 그 수치가 제트 인덱스 수치가 높은 태그가
위쪽으로 올 수가 있겠습니다
그래서 애를 999 그게 9999 굉장히 무리하게 많은 소를 줬어요
그래서 내가 항상 오버 했을 때의 위로 올라오게 만들어졌습니다
좀 9분을 할까요 예
자네 두 번째 서봅니다 두번째 여성은
로 테이트 첫 번째 여성은 스케 이고요 두번째 정은 로 테이트를
시켰습니다 그래서 오돌 인데요 약간 드리는 거죠 이것도 마찬가지로 호버
됐을 때는 무리하게 제 팅 덱스를 많이 주었고 가장 맨 위에 올라올 수
있도록
5 도니까 조금 들어가네요 만약 얘를 90도 뭐 어떻게 되겠어요
많이 들어가겠죠 음 이렇게 판이 들어 갈 수가 있겠습니다
자 다음에 백그라운드 예는 스크류 x 쭉 - 15 2 인데요 그러면
이렇게
- 15 고 제테스 9999 있구요
자 그 다음에
네번째 컬은 트랜스폼 에 스크류 스케일 2배 커 지구 5도 기울고
기울기 2 지네요 회전시키고 요 중심도 반만 이동했습니다 그러면 다
들어가니까 이렇게 나올 수 있겠죠
자 다음에 어 맨 마지막 녀석이 있는 다 맨 마지막 녀석은 호버 를
시켰어요 호바 식탁 등이 백그라운드 칼라 게 지정되고
애니메이션 여기서 우리가 지난 시간에 어떤 애니메이션을 들어가고 있네요
그래서 애니메이션을 들어가고 있는데
애니라는 키프레임 규칙을 지정할 있어요 겠네요
얘만 프롬 변화가 없어요 그냥 걔가 갖고 있던가 그대로 프롬의 에서부터
초까지 변화를 주는 거죠 그래서 그 애니메이션이 들어가는것은 2초 동안
듀레이션 데 라 이 트 레 이 터 카운트 인피니트 영원히 계속해서 반복해

애니메이션 넣어보면 디렉션 얼터네이트 계속해서 반복되는 거죠 갔다 왔다
갔다 왔다
이렇게 애니메이션 주고 애니메이션 키 프레임 애니의 들어가 줘 보니까
우리가 오늘 배운 트랜스폼 이란게 보이네요 그래서 백그라운드를 이렇게
변화를 주고 자 트랜스폼 속성 어떻게 변화 중요하면
2배 커 지구요 5 2 돌아가고 스크류 15도 x 축으로 기울기가
들어가구요
트랜스포머 리즈는 50% 이동 돼 있고 중심 정도 있고요
제트 인덱스는 9999 올라와 있습니다 그래서 어 다른 것들을 그냥
트랜스폼을 주면 애니메이션이 없죠
근데 애니메이션을 부여하기 위해서 키프레임 애니메이션을
선언 해줬구요 그걸 활용하기 위해서 그 안에다가 트랜스폼 속성을 좁고 그
다음에 애니메이션의 속성을
각 태그 요소의 다가 이렇게 좋습니다 그래서 지난 시간 했던 그
애니메이션과 트랜스폼 오늘 어떤 트랜스 공을 같이 활용한 거겠죠
그래서 이거를 실제로 가보면 앤 이미 줘 딱 다른 것들은 한번에 특별
하지만 내 같은게 는 중간에 애니메이션 효과가 일어나면서
그 변화되는 것을 관찰 할 수가 있겠습니다
자 요거 간단한 건데 한번만 그냥 해보고 마치도록 할게요 자 요거 해서
에세이 브 저장을 해야겠죠
자 됐습니다 자 내 눈을 먼저 만들어야 되니까 div 로 할게요
자 그 다음에 뉴 옐로 할까요
자 이러면 대충 정확해요
됐고 여기다가
자 2 3 4 5를 추정을 하겠습니다 자 브라우저 미리보기를 하면
그거 좀 이상하죠
자세 습니다 이런 상태구요 자 다음에 스타일시트 들어가는데
자 벤더 프리픽스 줘야 되겠죠 그래서 음 밴드 프리픽스 화일을 좀 복사를
할게요
html
요 파일을 복사를 해서 활용하겠습니다
음 됐구요
그 다음에 상단 하다가 링크 벤더 프릭스 의 위치를 지정해 줘야 겠죠
4 됐구요 자 그 다음에
스타일 시작합니다 먼저
어 메뉴의 위치를 좀 좀 해야 되겠죠
자위 들을 800 정도를 줄까요
천 주가의 넉넉 척 넉넉하게 주도록 하겠습니다
마진을 0 오토
포토 저를 1 팩 3
솔리드
회색으로 주도록 하겠습니다 자 초기 코즈 좀 넣어 줄게요
전체선택 짜 넣어 줘 갖고 마진
페팅 도 0을 넣어 주도록 하겠습니다
자 이런 결과 나오구요 다음에
굳이 것까지 필요없겠죠 지금은 위에
5블럭 키 된
li 는
ro 트 래 프 트 프 자 이렇게 하면 왼쪽으로 쭉 되겠구요
다음에
예 됐구요 자 다음에 li 에다가
어 보도를 좀 주도록 할게요
자 다음에 패딩 캅 좀 주도록 하겠습니다
대칭을
자 좌우로 30 픽셀 수 있을 거예요
사업을 하는 20 픽셀 주도록 할게요
됐구요 그 다음에 비하한 백그라운드를 좀 주도록 할게요
됐습니다 자 이제 이 정도 해주고요 자매 트랜스폼 총을 한번 부여를
해보도록 하겠습니다
자 li 첫 번째 태그를
죠 li 에
nth 첫 번째 여서 게 어떻게 a 에 호 보냈을 때 변화를 주는 것으로
하겠습니다
마우스를 올렸을때 변화를 주겠습니다 여기에다가 어떻게 이제 백그라운드
먼저 속성을 좀 주도록 할게요 백그라운드를
노란 색으로 바꿔 볼까요
이러면 노란 저 나올 거고요 다음에 먼저 스케일 먼저 조정 해 볼게요
트램 3
s 펌
1 2배 한번 키워 보도록 하구요 다음에 트랜스폼
테스 펌 오리진 를 이용해 줘 중심을
53만 이동을 해 주도록 하겠습니다
다음에 제트 인덱스 얘를 무리하게
999 정도 9999 일도 됐구요
쭈글이가 답답하네요 그쵸 자 이렇게 해놓고 나서 한번 볼까요
적응이 안되네요 자 다시 코드를 찾아 보도록 하겠습니다
a 태그를 않았죠 at 가 아니죠 이거
그래서 바로 이렇게 선택 상태 진짜 들어가 되겠죠
자 들어가니깐 오버 글자가 마음에 안드네요 그래서 컬러의 색상
블랙을 해줄까요
4 좋게 해 주도록 하겠습니다 네 그러면 커진거 확인이 되겠구요
도피가
가려 지죠 그래서 이거를
넉넉하게 줘 볼게요
예 그러면 다 나올 수 있겠죠 어
자 그 다음에 두 번째 여서
li 에 nth 구조 선택자 두번째 저게 어떻게 혹은 했을 때 상태의
선택 때 를 선택한 다음에
자 백그라운드 른 똑같이 학교 백그라운드 하고
글자의 색상은 똑같이 하도록 하겠습니다
이렇게요 대담에 어떤거 만 트랜스폼 만 다르게 하는데 이번에는 스크류를
할까요
스크롤을 해서
1 10도 수 투정도 기울이도록 하겠습니다
마찬가지로 젠 디제 10x
좀 무리하게 주고 있구요
자 결과 확인해보면 비율을 증거 확인이 되었구요
자 자네 마지막으로 애니메이션 하나만 더 해볼게요
별로 어려운 거 아니기 때문에 여러분들이 그냥 가볍게
하실 수가 있을 것 같습니다
자 3번 오버 됐을 때 애니메이션
캡 프레임 애니메이션 먼저 선언을 해줘야 겠죠
2 프레임 애니메이션 선언을 해 주고요 이름은 이라고 할게요
그 다음에 프럼
그 다음에 어디까지 투
음 지정 해 놓았구요 자 그 다음에 여기서
타 필요 없을거 같구요
자회사가 애니메이션 이름
n 이라고 주문 되구요 그 다음에 투 리 에이션 축하하여 애니메이션 둘의
전 얼마만큼 오랫동안 애니은 션이 될 거냐 주구요
자 그 다음에 반복 하기 위해서 애니메이션
비트레이트 카운트를 mkt 로 주도록 하겠습니다 자 이렇게 추고 나서
여기에다 이제 값을 좀 되죠 백그라운드 칼라
여기다 전에 좋네요 이거는 여기선 놔두고 요 그

댓글 0개

등록된 댓글이 없습니다.

 
Total 30건 1 페이지
썸네일
제목

Menu