패스트캠퍼스 챌린지 10일차 - Part 1. CSS 속성(4)

22. 변환 (1)

transform: 변환함수1 변환함수2 변환함수3 … ; transform: 원근법 이동 크기 회전 기울임;

2D 변환 함수

translate(x,y) 이동(x축, y축) / translateX(x) 이동(x축) / translateY(y) 이동(y축) - px

scale(x,y) 크기(x축, y축) - 배수

rotate(degree) 회전(각도) / skewX(x) 기울임(x축) / skewY(y) 기울임(y축) - deg

3D 변환 함수

perspective(n) 원근법(거리) - px !!원근법 함수는 제일 앞에 작성!!

rotateX(x) 회전(x축) / rotateY(y) 회전(y축) - deg

23. 변환 (2)

perspective : 하위 요소를 관찰하는 원근 거리를 지정

• 단위 : px 등 단위로 지정

backface-visibility : 3D 변환으로 회전된 요소의 뒷면 숨김 여부

• visible : 뒷면 보임
• hidden : 뒷면 숨김

24. Overwatch 캐릭터 선택 예제 (1)

.hero*32>.image
<!-- 쓰고 tab키 누르면 자동으로 32개 만들어짐 -->

margin: auto; /* 블록 요소 가로 사이즈 있을 때 가운데 정렬 */

25. Overwatch 캐릭터 선택 예제 (2)

CSS 최종

body{
  height: 100vh;
  background-image: url(./images/bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.container{
padding: 50px 0;
}

.container .heroes{
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 700px;
  margin: 0 auto;
  padding: 40px 20px;
}

.container .heroes .hero{
  width: 80px;
  height: 84px;
  margin: 4px;
  border: 3px solid #fff;
  border-radius: 10px;
  box-sizing: border-box;
  background-color: #555;
  transform: skewX(-14deg);
  transition: 
    transform .1s, 
    background-color .6s;
  overflow: hidden;
}

.container .heroes .hero:hover{
background-color: #ff9c00;
transform: skewX(-14deg) scale(1.3);
z-index: 1;
}

.container .heroes .hero .image {
  width: 140%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 90px;
  transform: skew(14deg) translateX(-16px);
}

.container .heroes .hero:nth-child(1) .image{ background-image: url(./images/hero1.png); }
/* 32개 */

.container .logo {
  max-width: 300px;
  margin: 0 auto;
  padding: 0 20px;
}

.container .logo img {
  width: 100%;
}

최종적으로 구현된 화면이다.

화면 크기를 줄이면 영웅들의 배열도 사이즈에 맞게 바뀌고, 마우스 hover했을 때 속성들도 적용된 것을 볼 수 있다.

 

드디어 CSS까지 끝냈다!!
솔직히 속성들만 주구장창 배우니까 조금 지루했는데 마지막엔 예제를 만들면서 복기할 수 있어서 재밌었다.
부모 요소에 들어가야되는 속성과 자식 요소에 들어가야되는 속성이 조금 헷갈리기 때문에 계속해서 기억하려고 노력해야겠다.
얼른 JS까지 끝내고 프로젝트 하고싶다.

 

http://bit.ly/3Y34pE0

패스트캠퍼스 [직장인 실무교육]

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.