애니메이션 효과
효과 분석
마우스가 포함 블록 위로 슬라이드되면 전체 요소가 180도 뒤집어 "앞"과 "뒤"가 전환됩니다.
HTML 분석
분석: .container
, .flip
은 애니메이션 효과를 얻기 위해 준비되었습니다. .front
, .back
은 각각 이미지를 래핑합니다.
이 효과를 얻기 위한 HTML은 다음과 같습니다. .container
,.flip
为了实现动画效果做准备。.front
,.back
各包裹一张图片。
实现该效果的HTML如下:
<p class="container"> <p class="flip"> <p class="front"> <img src="images/pic00.jpg" alt=""> </p> <p class="back"> <img src="images/pic01.jpg" alt=""> </p> </p> </p>
CSS分析
1. 元素布局
为了实现以上效果,先进行元素布局。给.front
,.back
相对.flip
进行绝对定位,让他们在相同位置重叠。
布局部分代码如下:
.container,.front,.back{width:380px;height:270px;} .flip{position:relative;} .front,.back{position:absolute;top: 0px;left: 0px;}
设置之后我们发现.back
的图片在.front
的上面,因此给.front
设置.fornt{z-index:2;}
注意:不要为了防止元素溢出设置overflow
属性,这将导致3D效果无法实现。
w3 spec中描述:
The following CSS property values require the user agent to create a flattened representation of the descendant elements before they can be applied, and therefore force the used value of transform-style to flat:
overflow: any value other than visible.
opacity: any value less than 1.
filter: any value other than none.
clip: any value other than auto.
2. 动画效果的实现
(1) 为了实现动画效果首先给祖先元素.container
,.flip
设置以下属性,以触发3d效果和设置动画:
.container{perspective:1000;transform-style:preserve-3d;} .flip{transition:0.6s;transform-style:preserve-3d;}
(2)接着,为了让图画翻转时不露出背面,给.front
,.back
设置backface-visibility
属性:.front,.back{backface-visibility:hidden;}
(3)为了让鼠标滑过包含块时,包含块翻转180度,以实现“正”“反”面的切换。给背面的元素设置transform:rotateY(-180deg)
,这时我们将无法看到.back
。
(4)最后,当用户的鼠标滑过.container
包含块时,.flip
翻转180度,这样,.front
翻转180度,由于背面是hidden
,无法看见;而.back
翻转180度后,回到0度,以正面示人,这样我们就能看到背面了。
代码如下:
.container{perspective:1000;transform-style:preserve-3d;} .container,.front,.back{width:380px;height:270px;} .flip{position:relative;transition:0.6s;transform-style:preserve-3d;} .front,.back{position:absolute;top: 0px;left: 0px;backface-visibility:hidden;} .front{z-index:2;} .back{transform:rotateY(-180deg);} .container:hover .flip{transform:rotateY(180deg);}
垂直翻转效果实现
垂直效果与水平翻转异曲同工。但是如果你只是把rotateY换成rotateX,那么你会发现图片是以顶部的那条线翻转的。
请注意:在上面的CSS代码中,我并未给.flip
设置宽高,所以当给.flip
应用transform:rotateY(180deg)
时,按照默认的transform-origin
值,是以元素的中心点为基本点翻转的。这里.flip
的高度是0,所以当然是以顶部的那条线为基础翻转。所以解决的办法有二:
给
.flip
设置和.front
,.back
相同的宽高。给
.flip
设置transform-origin:100% 135px/*高度的一半*/
属性。
OK,这样你就会发现垂直翻转是你想要的效果了!
总结
1. 思路
(1)最外层元素设置perspective
以实现3D效果。
(2)当鼠标滑过最外层元素时,第二包裹层翻转180度,同时设置过渡速度。
(3)两个翻转块绝对定位,以致实现相同位置的叠加。同时设置backface-visibility
避免在实现动画效果时露出背面。
(4)给.front
设置z-index
属性使它在写代码和展示时都在前面。
(5)让.back
rrreee
1. 요소 레이아웃
🎜위 효과를 얻기 위해 요소 레이아웃이 먼저 수행됩니다..flip
을 기준으로 .front
와 .back
의 위치를 절대적으로 지정하여 동일한 위치에서 겹치도록 합니다. 레이아웃 부분에 대한 코드는 다음과 같습니다. 🎜rrreee🎜설정을 해보니
.back
의 이미지가 .front
위에 있는 것을 발견해서 .front
Set .fornt{z-index:2;}
🎜🎜참고: 오버플로를 설정하지 마세요. code> 속성은 요소가 오버플로되는 것을 방지하여 3D 효과를 얻을 수 없습니다. 🎜🎜w3 사양에 설명됨: 🎜🎜🎜다음 CSS 속성 값은 사용자 에이전트가 적용되기 전에 하위 요소의 평면화된 표현을 생성해야 하므로 변환 스타일의 사용된 값을 평면으로 강제 설정합니다.🎜 <ul>
<li>🎜overflow: 보이는 것을 제외한 모든 값.🎜</li>
<li>🎜opacity: 1.🎜</li>
<li>🎜filter: 없음을 제외한 모든 값🎜 li></li>
<li>🎜clip: auto 이외의 모든 값🎜</li>
</ul>🎜<h4>2. 애니메이션 효과 구현</h4>🎜(1) 애니메이션 효과를 얻으려면, 먼저 상위 요소<code>.container
,.flip
를 제공하고 다음 속성을 설정하여 3D 효과를 트리거하고 애니메이션을 설정합니다. 🎜rrreee🎜(2) 다음으로, 뒤로 돌아가는 것을 방지하기 위해 사진을 뒤집을 때 노출되는 것을 방지하려면 .front
,.back
을 제공하고 backface-visibility
속성을 설정하세요..front,.back{backface-visibility:hidden;} 🎜🎜(3) 마우스가 위로 미끄러질 때 포함 블록을 180도 뒤집기 위해 "전면"의 전환을 실현합니다. " 및 "반대" 측면.
transform:rotateY(-180deg)
를 뒷면의 요소로 설정하면 .back
을 볼 수 없습니다. 🎜🎜(4) 마지막으로 사용자의 마우스가 블록이 포함된 .container
위로 슬라이드되면 .flip
이 180도 뒤집혀서 .front
가 180도 뒤집으면 뒷면이 숨겨져
보이지 않게 되고, .back
이 180도 뒤집으면 0도로 돌아가서 앞면이 표시됩니다. 우리는 뒷면을 볼 수 있습니다. 🎜🎜코드는 다음과 같습니다. 🎜rrreee🎜세로 뒤집기 효과 구현🎜🎜세로 효과는 가로 뒤집기와 동일합니다. 그러나 단순히 회전Y를 회전X로 바꾸면 그림이 맨 윗줄과 반전되는 것을 볼 수 있습니다. 참고: 위 CSS 코드에서는
.flip
의 너비와 높이를 설정하지 않았으므로 transform:rotateY를 <code>.flip
에 적용할 때 > (180deg), 기본 transform-origin
값에 따라 요소의 중심점이 뒤집기 기준점으로 사용됩니다. 여기서 .flip
의 높이는 0이므로 당연히 윗줄을 기준으로 뒤집어집니다. 따라서 두 가지 해결 방법이 있습니다. 🎜- 🎜
.flip
을.front
,.back
과 동일한 너비 및 높이로 설정하세요. . 🎜 - 🎜
transform-origin:100% 135px/*높이의 절반*/
속성을 .flip
으로 설정하세요.
좋아, 수직 뒤집기가 원하는 효과라는 것을 알게 될 것입니다! 🎜
1. 아이디어
🎜(1) 3D 효과를 얻으려면 가장 바깥쪽 요소를perspective
로 설정하세요. (2) 마우스가 가장 바깥쪽 요소 위로 미끄러지면 두 번째 래핑 레이어가 180도 뒤집혀 전환 속도를 설정합니다.
(3) 두 개의 플립 블록은 동일한 위치에 겹쳐질 수 있도록 절대 위치에 있습니다. 또한 애니메이션 효과를 구현할 때 뒷면이 노출되지 않도록
backface-visibility
를 설정하세요. (4)
z-index
속성을 .front
로 설정하여 코드를 작성하고 표시할 때 앞에 오도록 합니다. (5)
.back
을 처음에 180도 회전시켜 뒷면을 표시하도록 합니다. 🎜2. 발생한 문제:
(1) 포장 블록에서 크기가 다른 두 그림을 일관되게 만들기 위해 overflow
属性,无法实现3d效果。解决方法:给img
设置width:100%;height:100%;
(2)没有意识到.flip
의 높이가 0이므로 세로 뒤집기 중 표준점 오류로 인해 다른 효과가 발생합니다.
(3) 더 많이 작성해야만 더 많은 오류를 찾을 수 있고, 그러면 오류를 찾는 방법과 해결 방법을 알게 될 것입니다.