Baidu Tieba의 3D 카드 플롭 효과
- php中世界最好的语言원래의
- 2018-03-22 11:18:233955검색
이번에는 바이두 티에바의 3D 카드 플로핑 효과를 가져오겠습니다. 바이두 티에바의 3D 카드 플로핑 효과를 구현하기 위한 주의 사항은 다음과 같습니다.
오늘은 CSS3로 만든 뒤집기 효과를 가져오겠습니다. 요소 위에 마우스를 올리면 요소 뒤에 있는 정보가 보이는 느낌을 받을 수 있습니다. 기억력을 테스트하는 포커형 게임인 연련칸을 만들거나, 여자친구에게 말을 써준다면 이 예시를 활용해 만든 사진첩에 넣어서 해보세요 ㅎㅎ~
렌더링:
예제에 사용된 몇 가지 새로운 CSS3 속성:
a, -webkit-perspective: 800px;
perspective(perspective,spective): 이 속성은 뷰에서 3D 요소까지의 거리를 픽셀 단위로 정의합니다. . 이 속성을 사용하면 3D 요소의 3D 요소 보기를 변경할 수 있습니다. 표시되는 내용이 2D 변환인지 3D 변환인지 결정합니다.
b, -webkit-transform-style: Preserve-3d;
transform-style 속성은 중첩된 요소가 3D 공간에서 렌더링되는 방식을 지정합니다. 기본값은 평면이며 3D 효과를 사용한 다음 3D를 선택합니다.
c, -webkit-backface-visibility: 숨김, 선택한 요소를 뒤로 회전한 후 표시할지 여부.
d, -webkit-transform:rotateY(0); 요소가 Y축을 중심으로 회전합니다.
위의 속성은 먼저 지각적인 이해를 제공할 것입니다. 예를 읽은 후 이러한 속성을 주의 깊게 맛보거나 Baidu 또는 Google을 사용할 수 있습니다.
예:
Html:
<body> <p id="content"> <ul> <li> <a href="#" target="_blank"> <p><img alt="" src="images/1.jpg"/></p> <p> <h3>漩涡鸣人</h3> <p>日本漫画家岸本齐史作品《火影忍者》中男主角。因为身上封印着邪恶的九尾妖狐，无父无母的他受尽了村人的冷眼与歧视，他下定决心要成为第六代火影，让所有人都认同他的存在。</p> </p> </a> </li> <li> <a href="#" target="_blank"> <p> <img alt="" src="images/2.jpg"/> </p> <p> <h3>日向雏田</h3> <p> 日本漫画家岸本齐史作品《火影忍者》中的3号女主角。木叶忍者村的女忍者，木叶名门日向一族宗家族长的长女。喜欢漩涡鸣人，原本是个性格柔弱的女孩，但是在鸣人的影响下逐渐变得坚强，并逐渐成长为一名优秀的忍者。</p> </p> </a> </li> <li> <a href="#" target="_blank"> <p><img alt="" src="images/3.jpg"/></p> <p> <h3>蒙奇·D·路飞</h3> <p>蒙奇·D·路飞 是日本人气动漫 《海贼王》中的主人公。是日本人气动漫 《海贼王》中的主人公。草帽海贼团船长，梦想是找到传说中的宝藏 —— ONE PIECE，成为海贼王。</p> </p> </a> </li> <li> <a href="#" target="_blank"> <p> <img alt="" src="images/4.jpg"/> </p> <p> <h3>盒子先生</h3> <p> Danbo是一只用废纸盒DIY出来的可爱玩偶，圆圆的眼睛和三角形的嘴巴，时刻露出无辜的表情，让人看到就心软，Danbo是个纯真善良的小家伙，在它单纯的幻想世界里，总是透露出最纯真可爱的动人气息。</p> </p> </a> </li> </ul> </p> </body>
매우 간단합니다.
ul은 사진 세트이고 각 li에는 a가 있습니다(사진을 클릭하면 점프할 수 있기를 바라기 때문입니다). a에는 두 개의 p, 하나가 포함되어 있습니다. 하나는 정상적으로 표시되고(즉, 사진이 표시됨), 다른 하나는 사진이 회전된 후에 표시됩니다(즉, 소개).
CSS:
<link href="css/reset.css" rel="stylesheet" type="text/css">
<style type="text/css">
body
{
font-size: 14px;
font-family: Microsoft YaHei, Tahoma, Geneva, sans-serif;
background: #111;
}
#content ul
{
width: 960px;
margin: 150px auto;
padding: 60px 0;
}
#content ul li
{
margin-right: 20px;
width: 225px;
height: 180px;
float: left;
}
#content ul li:last-child
{
margin-right: 0;
}
#content ul li a
{
position: relative;
display: block;
width: 100%;
height: 100%;
/*舞台（动画元素的父容器）perspective*/
-webkit-perspective: 800px;
-moz-perspective: 800px;
}
#content ul li a > p
{
position: absolute;
left: 0;
height: 0;
width: 100%;
height: 100%;
color: #fff;
/*动画元素transform-style*/
-webkit-transform-style: preserve-3d;
-webkit-transition: .8s ease-in-out ;
/*动画元素背后设置为hidden*/
-webkit-backface-visibility: hidden;
}
#content ul li a p:first-child
{
/*
绕y轴旋转
*/
-webkit-transform: rotateY(0);
z-index: 2;
}
#content ul li a p:last-child
{
background: url("images/bg.jpg") no-repeat 0 0;
-webkit-transform: rotateY(180deg);
z-index: 1;
}
#content ul li a:hover p:first-child
{
-webkit-transform: rotateY(-180deg);
}
#content ul li a:hover p:last-child
{
-webkit-transform: rotateY(0);
}
#content ul li a p h3
{
margin: 0 auto 15px;
padding: 15px 0;
width: 200px;
height: 16px;
line-height: 16px;
font-size: 14px;
text-align: center;
border-bottom: 1px #fff dashed;
}
#content ul li a p p
{
padding: 0 10px;
font-size: 12px;
text-indent: 2em;
line-height: 18px;
}
</style>
좋습니다. 위 CSS에서는 기사 앞부분에서 언급한 CSS 속성을 찾을 수 있습니다.
1. 가장 중요한 것은 y축을 중심으로 회전하는 회전Y를 이해하는 것입니다. 회전Y는 말 그대로 y축이 어디에 있는지 물어봐야 합니다. 회전된 요소는 회전 중심(변환 원점 수정을 통과할 수 있음)이고 x 및 y축은 그래프에 있으며 z축은 중심에서 나가는 화살표(화면에서 머리를 향해 쏘는 화살표)입니다. .
예제에서 기본 이미지 회전Y=0은 마우스 포인터가 회전Y=-180이고, 음수는 y축을 중심으로 시계 반대 방향 회전을 의미하고, 양수는 시계 방향 회전을 의미합니다. 
css3 다중 클래스 선택기 사용에 대한 자세한 설명
위 내용은 Baidu Tieba의 3D 카드 플롭 효과의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!