CSS (4): 배경 + 변환

• 배경 출처

요소 배경 이미지의 원래 시작 위치를 설정합니다. 이 속성이 적용되려면 백그라운드 반복이 반복되지 않는지
확인해야 합니다.
가능한 값은 border-box | content-box입니다

border-box: 배경 이미지의 원점을 테두리의 왼쪽 상단으로 설정

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    background-repeat:no-repeat;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    background-origin:border-box;
</span><span style="color: #008080;">5</span> <span style="color: #000000;">}
</span><span style="color: #008080;">6</span> 
<span style="color: #008080;">7</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

padding-box: 배경 이미지의 원점을 내부 여백의 왼쪽 상단으로 설정

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    background-repeat:no-repeat;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    background-origin:padding-box;
</span><span style="color: #008080;">5</span> <span style="color: #000000;">}
</span><span style="color: #008080;">6</span> 
<span style="color: #008080;">7</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

content-box: 배경 이미지의 출처를 콘텐츠 영역의 왼쪽 상단으로 설정

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    background-repeat:no-repeat;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    background-origin:content-box;
</span><span style="color: #008080;">5</span> <span style="color: #000000;">}
</span><span style="color: #008080;">6</span> 
<span style="color: #008080;">7</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

• 배경클립

배경 이미지가 바깥쪽으로 잘리는 영역을 설정합니다.
가능한 값은 border-box | content-box입니다

border-box: 자르기 영역을 테두리를 포함하여 테두리 내에 있도록 설정

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    background-clip:border-box;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">}
</span><span style="color: #008080;">5</span> 
<span style="color: #008080;">6</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

padding-box: 자르기 영역을 패딩을 포함한 패딩 내부로 설정

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    background-clip:padding-box;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">}
</span><span style="color: #008080;">5</span> 
<span style="color: #008080;">6</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

content-box: 자르기 영역을 콘텐츠 영역으로 설정

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    background-clip:content-box;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">}
</span><span style="color: #008080;">5</span> 
<span style="color: #008080;">6</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

• 변신

요소의 크기, 투명도, 회전 각도, 왜곡 등을 변경합니다.
구문:
transform: none | +
transform-function에는 다음 메소드가 포함됩니다.
번역(): 객체의 2D 변환(2D 변환)을 지정합니다. 첫 번째 매개변수는 X축에 해당하고 두 번째 매개변수는 Y축에 해당합니다. 두 번째 매개변수가 제공되지 않으면 기본값은 0입니다.
변환 원점: 모든 요소에는 기본적으로 중심점이 요소의 X축 및 Y축의 50%에 위치합니다. .
translateX(): 객체의 X축(가로 방향)의 이동을 지정
translateY(): 객체의 Y축(세로 방향)의 이동을 지정
rotate(): 2D를 지정 객체 회전(2D 회전)을 수행하려면 먼저 <'Transform-origin'> 속성
scale(): 객체의 2D 스케일(2D 스케일링)을 지정해야 합니다. 첫 번째 매개변수는 X축에 해당하고 두 번째 매개변수는 Y축에 해당합니다. 두 번째 매개변수가 제공되지 않으면 첫 번째 매개변수의 값이 기본으로 사용됩니다.
skew(): 객체 기울이기 변형(경사 왜곡)을 지정합니다. 첫 번째 매개변수는 X축에 해당하고 두 번째 매개변수는 Y축에 해당합니다. 두 번째 매개 변수가 제공되지 않으면 기본값은 0입니다.
translate3d(): 객체의 3D 변위를 지정합니다. 첫 번째 매개변수는 X축, 두 번째 매개변수는 Y축, 세 번째 매개변수는 Z축에 해당하며 매개변수는 생략할 수 없습니다.

번역: 요소를 X축과 Y축으로 각각 50% 오프셋

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    width:200px;
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    height:200px;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    transform: translate(50%,50%);
</span><span style="color: #008080;">6</span> <span style="color: #000000;">}
</span><span style="color: #008080;">7</span> 
<span style="color: #008080;">8</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

transform-origin: 요소의 중심점을 왼쪽 상단 모서리인 0 0 위치에 설정합니다.

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    width:200px;
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    height:200px;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    transform-origin:0 0;
</span><span style="color: #008080;">6</span> <span style="color: #000000;">    transform: translate(50%,50%);
</span><span style="color: #008080;">7</span> <span style="color: #000000;">}
</span><span style="color: #008080;">8</span> 
<span style="color: #008080;">9</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

translateX: X축 오프셋만 설정

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    width:200px;
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    height:200px;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    transform: translateX(50%);
</span><span style="color: #008080;">6</span> <span style="color: #000000;">}
</span><span style="color: #008080;">7</span> 
<span style="color: #008080;">8</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

translateY: Y축 오프셋만 설정

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    width:200px;
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    height:200px;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    transform: translateY(50%);
</span><span style="color: #008080;">6</span> <span style="color: #000000;">}
</span><span style="color: #008080;">7</span> 
<span style="color: #008080;">8</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

회전: 2D 회전을 위한 요소를 설정합니다. 허용되는 매개변수는 각도(도)입니다.

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    width:200px;
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    height:200px;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    transform: rotate(180deg);
</span><span style="color: #008080;">6</span> <span style="color: #000000;">}
</span><span style="color: #008080;">7</span> 
<span style="color: #008080;">8</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

scale: 요소를 3배로 설정합니다. 허용되는 매개변수는 배율을 나타내는 숫자 값입니다.

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    width:200px;
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    height:200px;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    transform: scale(3);
</span><span style="color: #008080;">6</span> <span style="color: #000000;">}
</span><span style="color: #008080;">7</span> 
<span style="color: #008080;">8</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

skew: 요소의 기울기 각도 설정

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    width:200px;
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    height:200px;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    transform: skew(60deg);
</span><span style="color: #008080;">6</span> <span style="color: #000000;">}
</span><span style="color: #008080;">7</span> 
<span style="color: #008080;">8</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

translate3d: 요소의 3D 변위 설정

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    width:200px;
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    height:200px;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    transform: translate3d(50px,50px,1px);
</span><span style="color: #008080;">6</span> <span style="color: #000000;">}
</span><span style="color: #008080;">7</span> 
<span style="color: #008080;">8</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>