CSS에서 반전 180을 달성하는 방법

CSS에서 180을 뒤집는 방법: 1. HTML 샘플 파일을 만듭니다. 2. div를 "

"로 정의합니다. 3. "Background: url('/public/smart_equipment. png') 0 0 no-repeat;transform:rotate(180deg);" 속성을 사용하면 180도 회전할 수 있습니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3 버전, DELL G3 컴퓨터

CSS에서 반전 180을 달성하는 방법은 무엇입니까?

CSS3는 배경 이미지를 180도 회전만 합니다

CSS3는 배경 이미지를 회전합니다

최근 조종석을 작성하면서, 단순히 배경 이미지를 특정 각도로 회전시키는 문제에 대해 고민했습니다.

CSS3의 transfrom을 사용하여 전체 컨테이너를 특정 각도로 뒤집는 것만으로는 원하는 효과를 얻을 수 없습니다.

그런 다음 관련 기사를 조사하고 참조하여 마침내 이 효과를 얻었습니다.

코드 구현

HTML 템플릿은 다음과 같습니다

<div class="smart_development_right">
  <div class="smart_development_content">
    <span>智能感知设备</span>
  </div>
  <div class="smart_development_content">
    <span>在线率</span>
  </div>
</div>

CSS 코드

.smart_development_right{
  position: relative;
  overflow: hidden; 
}
.smart_development_right::before {
 content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background: url('/public/smart_equipment.png') 0 0 no-repeat;
    transform: rotate(180deg);
}

아이디어가 맞다면 구현이 매우 간단할 것입니다.

추천 학습: "css 동영상 튜토리얼"

위 내용은 CSS에서 반전 180을 달성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!