집 >웹 프론트엔드 >HTML 튜토리얼 >CSS3 이미지 뒤집기 전환 사례 및 중요 속성 분석

CSS3 이미지 뒤집기 전환 사례 및 중요 속성 분석

WBOY원래의: 2016-08-26 10:13:151759검색

CSS3를 사용하지 않는 이미지 플립 스위칭은 일반적으로 JS를 사용하여 애니메이션을 구현하며 요소의 너비와 왼쪽 또는 높이와 상단을 동시에 작동하여 플립 효과를 시뮬레이션하고 적절한 시점에 src 또는 z-를 변경합니다. index는 그림 전환을 구현합니다.

우연히 CSS3 솔루션인 http://www.webhek.com/css-flip/을 발견하고 빠르게 배워서 정리하면 다음과 같습니다

먼저 코드를 업로드하세요(대부분은 위 링크에서 복사한 것이므로 호환성 문제가 크니 주의해서 사용하세요)

HTML:

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="flip-container"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="flipper"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="front"</span><span style="color: #0000ff;">></span>here is content : AA<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="back"</span><span style="color: #0000ff;">></span>here is content : BB<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

CSS:

<span style="color: #800000;">.flip-container </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid #aaa</span>;<span style="color: #ff0000;">
    -webkit-perspective</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
    -moz-perspective</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
    -ms-perspective</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
    perspective</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
    -ms-transform</span>:<span style="color: #0000ff;"> perspective(500px)</span>;<span style="color: #ff0000;">
    -moz-transform</span>:<span style="color: #0000ff;"> perspective(500px)</span>; <span style="color: #008000;">/*</span><span style="color: #008000;">重要</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    transform-style</span>:<span style="color: #0000ff;"> preserve-3d</span>; <span style="color: #008000;">/*</span><span style="color: #008000;">重要</span><span style="color: #008000;">*/</span>
}<span style="color: #800000;">
.flipper </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> 0.6s</span>;<span style="color: #ff0000;">
    transform-style</span>:<span style="color: #0000ff;"> preserve-3d</span>; <span style="color: #008000;">/*</span><span style="color: #008000;">重要</span><span style="color: #008000;">*/</span>
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 触发翻转 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.flip-container:hover .flipper</span>{<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;

}<span style="color: #800000;">
.front ,.back</span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    backface-visibility</span>:<span style="color: #0000ff;"> hidden</span>;  <span style="color: #008000;">/*</span><span style="color: #008000;">重要</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 100%</span>;
}<span style="color: #800000;">
.front </span>{<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(0deg)</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 2</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> red</span>;
}<span style="color: #800000;">
.back </span>{<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(-180deg)</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> green</span>;
}

가장 바깥쪽 컨테이너 요소에 전체 애니메이션 영역의 관점 속성을 설정합니다.
외부 컨테이너 요소에서 마우스 오버 이벤트가 발생하면 내부에 카드를 저장하는 컨테이너가 180도 회전합니다. 회전 속도도 여기서 제어됩니다. 회전값을 -180deg로 설정하면 역회전이 됩니다.
은 카드 앞면과 뒷면의 요소가 동일한 위치에서 서로를 막도록 절대적으로 위치해야 함을 의미합니다. 뒷면 가시성 속성은 숨김으로 설정되어 있어 뒤집을 때 각 카드의 뒷면이 보이지 않습니다.
카드 앞면이 뒷면보다 높은 Z-색인 값으로 설정하여 카드 앞면이 위로 오도록 합니다.
뒷면 카드를 180도 회전시켜 뒷면 역할을 하게 합니다.

복사를 마치며 CSS에 특히 주의가 필요한 중요한 주석이 있습니다.

perspective 속성은 뷰에서 3D 요소까지의 거리를 픽셀 단위로 정의합니다. 직관적인 현상은 뒤집힐 때 내부 요소가 외부 테두리를 넘치게 된다는 것입니다. 작성되지 않거나 속성 값이 0인 경우 외부 테두리 내에서만 변경됩니다.

그리고 속성 값은 뒤집어야 하는 요소의 너비와 높이와 호환되도록 특별한 주의가 필요합니다. 너무 적으면 오버플로되고 너무 많이 설정하면 차이가 거의 없습니다. 0. 차이 효과는 아래 그림과 같습니다

transform-style: Preserve-3d; 변형 스타일 속성은 3D 공간에서 중첩된 요소를 렌더링하는 방법을 지정합니다(w3cschool에서 복사).

플립 컨테이너와 플리퍼를 모두 설정해야 합니다. 플립 컨테이너가 설정되지 않은 경우 오버플로 3D 효과가 누락되며, 컨테이너를 뒤집은 후에도 여전히 표시됩니다. 뒷면-가시성: 숨김 효과를 반영할 수 없습니다.

더 답답한 점은 IE11에서도 변환 스타일이 지원되지 않는다는 점입니다.

컨테이너를 뒤집는 것이 아니라 동시에 앞뒤로 뒤집는 또 다른 IE 호환 솔루션이 있습니다. 다행히 IE는 여전히 뒷면 가시성: 숨김을 지원하므로 뒤집기 효과는 다음과 같습니다. 이전 솔루션과 동일합니다.

HTML은 다음과 같습니다.

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="flip-container"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="front"</span><span style="color: #0000ff;">></span>here is content : AA<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="back"</span><span style="color: #0000ff;">></span>here is content : BB<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

앞뒤가 직접 뒤집히기 때문에 플리퍼가 중복되어 플리퍼가 제거됩니다.

CSS 코드는 다음과 같습니다. (많은 테스트를 거쳐 다양한 브라우저를 지원하기 위해 최선을 다했으며, CSS3 Flip을 지원하지 않는 다운그레이드된 브라우저도 전환 효과를 유지했습니다.)

<span style="color: #800000;">.flip-container </span>{<span style="color: #ff0000;">
    -webkit-perspective</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
    -moz-perspective</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
    -ms-perspective</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
    perspective</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
    -ms-transform</span>:<span style="color: #0000ff;"> perspective(500px)</span>;<span style="color: #ff0000;">
    -moz-transform</span>:<span style="color: #0000ff;"> perspective(500px)</span>;<span style="color: #ff0000;">
    -moz-transform-style</span>:<span style="color: #0000ff;"> preserve-3d</span>;<span style="color: #ff0000;">
    -ms-transform-style</span>:<span style="color: #0000ff;"> preserve-3d</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid #aaa</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;">由于内层绝对定位导致高度缺少，这里显式设置了宽高</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.flip-container, .front, .back </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;
}<span style="color: #800000;">

.flip-container:hover .front </span>{<span style="color: #ff0000;">
    -webkit-transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;<span style="color: #ff0000;">
    -moz-transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;<span style="color: #ff0000;">
    -o-transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;<span style="color: #ff0000;">
    -ms-transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;
}<span style="color: #800000;">
.flip-container:hover .back </span>{<span style="color: #ff0000;">
    -webkit-transform</span>:<span style="color: #0000ff;"> rotateY(0deg)</span>;<span style="color: #ff0000;">
    -moz-transform</span>:<span style="color: #0000ff;"> rotateY(0deg)</span>;<span style="color: #ff0000;">
    -o-transform</span>:<span style="color: #0000ff;"> rotateY(0deg)</span>;<span style="color: #ff0000;">
    -ms-transform</span>:<span style="color: #0000ff;"> rotateY(0deg)</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(0deg)</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 3</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 降级处理不支持CSS3的浏览器，只是简单的将back上升盖住front </span><span style="color: #008000;">*/</span>
}<span style="color: #800000;">

.front, .back </span>{<span style="color: #ff0000;">
    -webkit-backface-visibility</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    -moz-backface-visibility</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    -ms-backface-visibility</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    backface-visibility</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    -webkit-transition</span>:<span style="color: #0000ff;"> 0.6s</span>;<span style="color: #ff0000;">
    -moz-transition</span>:<span style="color: #0000ff;"> 0.6s</span>;<span style="color: #ff0000;">
    -o-transition</span>:<span style="color: #0000ff;"> 0.6s</span>;<span style="color: #ff0000;">
    -ms-transition</span>:<span style="color: #0000ff;"> 0.6s</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> 0.6s</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 0px</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 0px</span>;
}<span style="color: #800000;">
.front </span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> red</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 2</span>;
}<span style="color: #800000;">
.back </span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> green</span>;<span style="color: #ff0000;">
    -webkit-transform</span>:<span style="color: #0000ff;"> rotateY(-180deg)</span>;<span style="color: #ff0000;">
    -moz-transform</span>:<span style="color: #0000ff;"> rotateY(-180deg)</span>;<span style="color: #ff0000;">
    -o-transform</span>:<span style="color: #0000ff;"> rotateY(-180deg)</span>;<span style="color: #ff0000;">
    -ms-transform</span>:<span style="color: #0000ff;"> rotateY(-180deg)</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(-180deg)</span>;
}

위 내용에는 불필요한 호환성 코드가 많을 수 있으며, 레벨이 제한되어 있어 더욱 간결한 작성 방법 교환을 환영합니다.

다른 상황에서 마우스 오버를 사용하여 요소 뒤집기를 실행할 때는 다음과 같이 사용해야 합니다. 고정된 너비와 높이의 요소는 트리거되고 하위 요소는 뒤집힙니다.

<span style="color: #800000;">.outer </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;
}<span style="color: #800000;">
.inner </span>{<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> 0.6s</span>;
}<span style="color: #800000;">
.outer:hover .inner</span>{<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;
}

다음과 같이 요소 호버 뒤집기를 직접 실행하면 요소 뒤집기 과정에서 요소 영역이 작아지고 커서가 요소에서 분리되어 요소가 복원되고 호버링이 작아져 부드러움이 발생합니다

<span style="color: #800000;">.inner </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;<br>　　transition: 0.6s;
}<span style="color: #800000;">
.inner:hover</span>{<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;
}

성명：

이전 기사：sass 기본 문법다음 기사：sass 기본 문법

CSS3 이미지 뒤집기 전환 사례 및 중요 속성 분석

관련 기사