>  기사  >  웹 프론트엔드  >  CSS를 사용하여 이미지 뒤집기 효과를 얻는 방법(코드 첨부)

CSS를 사용하여 이미지 뒤집기 효과를 얻는 방법(코드 첨부)

不言
不言원래의
2018-09-25 17:57:124412검색

이 글의 내용은 CSS를 사용하여 이미지 뒤집기 효과를 얻는 방법(코드 포함)입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

구체적인 렌더링은 다음과 같습니다.

사용된 주요 기술은 3D 뒤집기 및 위치 지정 외에도 새로운 속성 backface-visibility: visible|hidden;

이 속성은 주로 요소의 뒷면을 설정하는 데 사용됩니다. 보이는.

구체적인 단계는 다음과 같습니다.

1. 페이지 본문에

 <div>
        <img src="Images/b.jpg" alt="">
        <img src="Images/c.jpg" alt="">
    </div>

을 작성합니다.

# 🎜🎜#2. 위치 지정을 통해 두 장의 사진을 함께 오버레이합니다

div img {
            width: 250px;
            height: 170px;
            position: absolute;
            top: 0;
            left: 0;
            transition: all 1s;
        }

3. 사진이 보이지 않게# 4. 180도 회전 추가 #

마침내 완전한 코드 제공

div img:first-child {
            z-index: 1;
            backface-visibility: hidden;
        }

위 내용은 CSS를 사용하여 이미지 뒤집기 효과를 얻는 방법(코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.