Box-shadow generator

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator

Box-shadow : length값(<offset-x>, <offset-y>, <blur-radius>, <spread-radius>), inset, <color>

inset은 움푹 들어간 것처럼 그림자가 요소의 테두리 안, 배경색 위, 내부 콘텐츠 밑에 그려진다.

.box1,
.box2 {
  position: relative;
  top: 5rem;
  left: 10rem;

  width: 20rem;
  height: 20rem;
  background-color: rgb(148, 204, 158);

  border-radius: 5%;

  box-shadow: 0px 5px 20px 3px hsla(0, 0%, 0%, 0.2);

  transition: 0.2s;
}

.box1:hover,
.box2:hover {
  /* box-shadow: 0px 5px 20px 3px hsla(0, 0%, 0%, 0.4); */
  transform: translateY(-3%);
}

.box2 {
  top: 10rem;

  box-shadow: -15px -15px 15px rgba(255, 255, 255, 0.2),
    15px 15px 15px rgba(0, 0, 0, 0.2);
}

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms

Transform-origin

원점의 위치를 지정합니다. 기본값은 요소의 중심이며 변경할 수 있습니다. 회전, 확대, 비틀기 등 하나의 점을 기준으로 하는 변형에서 사용합니다.

Transform

요소에 적용할 변형을 지정합니다. 여러 개의 변형 목록을 공백으로 구분하여 대입하면 순차적으로 합성한 결과물을 적용합니다. 합성은 오른쪽부터 왼쪽으로 진행합니다.

3D CSS

Perspective

none | <length>(사용자와 z=0까지의 거리)
The perspective CSS property determines the distance between the z=0 plane and the user in order to give a 3D-positioned element some perspective.

• perspective-origin : 소실점.

transform

• transform-style : flat | preserve-3d
  preserve-3d : Indicates that the children of the element should be positioned in the 3D-space.

• transform : rotate3d(x, y, z, a)
  https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d()

• transform : rotateY(a)
  Y축 기준으로 angle 만큼 회전. +angle은 시계방향.

backface-visibility

visible | hidden
: visible이 default라서 3d 부모요소에 inherit으로 준다.