CSS로 배경을 회전하는 방법

CSS 회전 배경

CSS(Cascading Style Sheets)는 웹 페이지의 모양과 레이아웃을 제어하는 ​​데 널리 사용되는 기술입니다. CSS를 사용하여 색상, 이미지, 위치 지정을 포함한 배경을 제어할 수 있습니다. 그러나 CSS에는 배경을 회전하여 웹 사이트에 독특한 모양을 추가할 수 있는 멋진 기능도 있습니다.

배경을 회전시키는 기본 아이디어는 CSS3의 변형 속성을 이용하는 것입니다. 이 속성을 사용하면 개발자는 2차원 또는 3차원의 행렬 변환을 지정하여 요소를 변환할 수 있습니다. Rotate() 함수를 사용하여 객체를 회전시킬 수 있습니다. 또한 Translate() 함수를 사용하여 객체의 x 및 y 좌표를 설정할 수도 있습니다.

CSS를 사용하여 배경을 회전하는 방법을 보여주기 위해 아래의 몇 가지 예를 살펴보겠습니다.

예제 1: CSS를 사용하여 단색 배경 회전

먼저 CSS를 사용하여 단색 배경을 회전하는 방법을 살펴보겠습니다. 다음 CSS 코드를 사용하여 이 작업을 수행할 수 있습니다.

div {
    height: 100vh;
    width: 100vw;
    background-color: #FF6633;
    position: relative;
    transform: rotate(30deg);
    transform-origin: center;
}

이 예에서 div 요소는 뷰포트 크기와 높이 및 너비가 동일합니다. 배경색은 주황색으로 설정했습니다. 위치는 문서 흐름을 기준으로 합니다. 변환 속성과 회전() 함수를 사용하면 배경을 30도 회전하여 페이지에 기울어진 효과를 줄 수 있습니다. 또한 중심점을 중심으로 회전이 발생하도록 변환 원점 속성을 설정했습니다.

예 2: CSS를 사용하여 이미지 배경 회전

동일한 기술을 사용하여 이미지 배경을 회전할 수 있습니다. 다음은 CSS를 사용하여 배경 이미지를 회전하는 방법을 보여주는 예입니다.

div {
    height: 100vh;
    width: 100vw;
    background-image: url("background.jpg");
    background-size: cover;
    position: relative;
    overflow: hidden;
}

div:before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    height: 200%;
    width: 200%;
    background-image: inherit;
    transform: rotate(30deg);
    z-index: -1;
}

이 예에서는 배경 이미지와 함께 div 요소를 사용합니다. 배경 이미지가 잘리지 않고 회전하도록 배경 이미지를 조정하기 위해 background-size:cover 속성을 설정했습니다. 또한 Overflow: Hidden 속성을 사용하여 배경 이미지를 숨깁니다.

다음으로 :before 의사 요소를 사용하여 동일한 크기의 배경 이미지를 만든 다음 30도 회전하고 z-index 속성을 사용하여 배경 아래에 만듭니다. top: -50% 및 left: -50% 속성을 설정하면 해당 위치는 상위 div 요소의 중심점을 기준으로 합니다.

예 3: CSS를 사용하여 텍스트 배경 회전

CSS를 사용하여 텍스트를 배경으로 회전할 수도 있습니다. 다음은 CSS를 사용하여 텍스트 배경을 회전하는 방법을 보여주는 예입니다.

div {
    height: 100vh;
    width: 100vw;
    font-size: 80px;
    position: relative;
    overflow: hidden;
}

div:before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    height: 200%;
    width: 200%;
    background: #FF6633;
    transform: rotate(30deg);
    z-index: -1;
}

h1 {
    color: #FFFFFF;
    transform: rotate(-30deg);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

이 예에서는 텍스트가 있는 div 요소를 사용하고 위치와 크기가 동일한 :before 의사 요소에 배치합니다. 변환:회전(30deg) 속성을 사용하여 :before 의사 요소를 30도 회전하고 색상을 주황색으로 설정합니다.

다음으로, 변환: 회전(-30deg) 속성을 사용하여 텍스트를 30도 회전하고 위치: 절대, 위쪽: 50%, 왼쪽: 50% 중앙을 설정하여 상위 div 요소와 정렬합니다. 마지막으로 번역(-50%, -50%) 속성을 사용하여 중앙에 배치합니다.

요약

CSS 회전 배경은 웹사이트를 더욱 흥미롭고 매력적으로 보이게 만드는 데 사용할 수 있는 멋진 효과입니다. 이 기사에서는 CSS를 사용하여 배경을 회전하는 방법을 보여주기 위해 단색 배경, 이미지 배경 및 텍스트 배경의 예를 사용했습니다. 데모에서 사용한 변환:회전() 속성은 각도를 지정하여 배경을 회전시키는 데 매우 편리합니다.

위 내용은 CSS로 배경을 회전하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!