CSS3를 사용하여 이미지 뒤집기 효과를 얻는 방법

CSS3는 웹 디자인의 필수적인 부분입니다. 그 중 CSS3의 3D 변환을 통해 그림의 뒤집기 효과를 얻을 수 있으며 웹 페이지에 역동성과 패션을 추가할 수 있습니다. CSS3 이미지 반전 효과를 구현하는 방법을 살펴보겠습니다.

구현 단계

1. 먼저 아래와 같이 HTML 코드를 통해 이미지 요소를 삽입해야 합니다.

<div class="container">
    <img src="image.jpg" alt="image" />
</div>

여기서 컨테이너는 이미지를 포함하는 데 사용되는 컨테이너입니다.

2. 다음으로 CSS 코드를 통해 아래와 같이 컨테이너와 img의 스타일을 설정합니다.

.container {
    perspective: 800px;
    /* 把container容器设置成3D透视 */
}
img {
    width: 100%;
    height: 100%;
    /* 设置图片的宽高 */
    position: absolute;
    backface-visibility: hidden;
    /* 隐藏图片的背面 */
    transition: transform .6s ease;
    /* 设置动画效果 */
}

그중 Perspective 속성은 컨테이너의 원근 거리를 설정하는 것이고, backface-visibility 속성은 여부를 제어하는 ​​데 사용됩니다. 요소의 뒷면을 표시하기 위해 전환 속성을 사용하여 이미지 뒤집기의 애니메이션 효과를 얻습니다.

3. 그런 다음 사진에 반전 효과를 설정하세요. 아래와 같이 앞면과 뒷면에 각각 스타일을 설정합니다.

img {
    transform-style: preserve-3d;
    /* 设置为3D */
}
img:hover {
    transform: rotateY(180deg);
    /* 翻转180度 */
}
img:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    transform: rotateY(180deg);
    /* 翻转180度 */
}
img:hover:after {
    transform: rotateY(0deg);
    /* 返回原来的状态 */
}

여기서 변형 속성은 뒤집기 각도를 설정하는 데 사용되며, 콘텐츠 속성은 유연성을 높이기 위해 요소 뒤에 가상 "의사 요소"를 추가하는 데 사용됩니다. 스타일의.

4. 마지막으로 아래와 같이 컨테이너를 원근감으로 설정하고 이미지의 뒤집기 효과를 설정합니다.

.container:hover img {
    transform: rotateY(180deg);
    /* 翻转180度 */
}
.container:hover img:after {
    transform: rotateY(0deg);
    /* 返回原来的状态 */
}

이런 식으로 마우스를 컨테이너 위로 가져가면 이미지가 3D로 뒤집힙니다.

요약

CSS3 이미지 뒤집기 효과는 웹 페이지에 역동성과 패션을 더해 웹 페이지를 더욱 흥미롭고 생생하게 보이게 할 수 있습니다. 위의 단계를 통해 CSS3 이미지 뒤집기 효과를 쉽게 구현할 수 있습니다.

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