Baidu Tieba의 3D 카드 플롭 효과-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

Baidu Tieba의 3D 카드 플롭 효과

php中世界最好的语言

Mar 22, 2018 am 11:18 AM

효과 바이두 포스트 바

이번에는 바이두 티에바의 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축을 중심으로 시계 반대 방향 회전을 의미하고, 양수는 시계 방향 회전을 의미합니다.

예제 핵심은 마우스가 가리킬 때입니다. 그림(p:first-child)은 0도에서 -180도까지 y축을 중심으로 시계 반대 방향으로 180도 회전합니다. 소개(p:last-child)는 시계 반대 방향으로 180도 회전합니다. 180도에서 y축을 중심으로 온도가 0도에 도달합니다. 두 개의 시계 반대 방향 회전 효과를 함께 만듭니다. 왜 기본 인트로가 0도가 아닌지 묻는 분들이 계시는데, 여기서 인트로는 반시계 방향으로 180도 회전한 후 정면 상태이므로 이미지가 가려지면 일반에서 시계 방향으로 180도 회전한 것과 같습니다. 상태, 왜냐하면 마우스 포인트가 정상 상태로 돌아가야 하기 때문입니다.

관점, 무대(애니메이션의 상위 요소)를 설정하는 요령이 있습니다.

Transform-style의 3D 변화는 당연히 3D이므로 별로 할 말이 없습니다.

CSS3의 3D 효과와 관련된 속성이 더 많이 있습니다. 기회가 된다면 앞으로 예제에서는 사용하지 않는 속성을 일부러 사용하겠습니다~

소스 코드를 다운로드하려면 클릭하세요. .

여러분의 조언을 환영합니다~ 그런데 이 예제는 크롬에서 실행해야 합니다. 파이어폭스는 잘 지원하지 않는 것 같고, 파이어버그는 거의 사용되지 않습니다~ 헤헤~

그렇다고 생각합니다. 이 기사의 사례를 읽은 후 방법을 익혔습니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7569

Cakephp 튜토리얼

1386

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

107

Related knowledge

사용자에게 드문 결함 발생: Samsung Watch 스마트워치에서 갑자기 흰색 화면 문제가 발생함 Apr 03, 2024 am 08:13 AM

스마트폰 화면에 녹색 줄이 나타나는 문제를 겪어보셨을 텐데요. 한 번도 본 적이 없더라도 인터넷에서 관련 사진을 본 적이 있을 것입니다. 그렇다면 스마트워치 화면이 하얗게 변하는 상황을 겪어보신 적 있으신가요? CNMO는 지난 4월 2일 외신을 통해 한 Reddit 사용자가 소셜 플랫폼에 삼성 워치 시리즈 스마트워치 화면이 하얗게 변하는 사진을 공유했다는 사실을 접했습니다. 해당 이용자는 "떠날 때 충전 중이었는데, 돌아올 때 이랬다. 재시작을 하려고 했는데, 삼성워치 스마트워치 화면이 하얗게 변했다"고 적었다. Reddit 사용자가 특정 모델을 지정하지 않았습니다. 하지만 사진으로 보면 삼성 워치5가 될 것 같습니다. 이전에 다른 Reddit 사용자도 보고했습니다.

Kyushu Fengshen Assassin 4S 라디에이터 리뷰 공냉식 'Assassin Master' 스타일 Mar 28, 2024 am 11:11 AM

ASSASSIN이라고 하면, 플레이어들은 확실히 "Assassin's Creed"에 나오는 암살의 대가들을 떠올릴 것이라고 생각합니다. 그들은 숙련될 뿐만 아니라 "어둠에 헌신하고 빛을 섬기는" 신념을 가지고 있습니다. 국내에서 잘 알려진 섀시/전원 공급 장치/냉각 가전 브랜드 DeepCool의 ASSASSIN 플래그십 공냉식 라디에이터 시리즈는 서로 일치합니다. 최근 이 시리즈의 최신 제품인 ASSASSIN4S가 출시되었습니다. "Assassin in Suit, Advanced"는 고급 플레이어에게 새로운 공냉식 경험을 선사합니다. 외관은 디테일이 가득합니다. Assassin 4S 라디에이터는 이중 타워 구조 + 단일 팬 내장 디자인을 채택했으며, 외부는 큐브 모양의 페어링으로 덮여 있어 전체적으로 강렬한 느낌을 줍니다. 다양한 컬러를 만나보세요.

봄의 절묘한 빛과 그림자 예술, Haqu H2는 비용 효율적인 선택입니다. Apr 17, 2024 pm 05:07 PM

봄이 오면 모든 것이 되살아나고 모든 것이 활력과 활력으로 가득 차 있습니다. 이 아름다운 계절에 가정 생활에 색상을 추가하는 방법은 무엇입니까? 정교한 디자인과 뛰어난 비용 효율성을 갖춘 Haqu H2 프로젝터는 올 봄에 없어서는 안 될 아름다움이 되었습니다. 이 H2 프로젝터는 콤팩트하면서도 스타일리시합니다. 거실 TV장 위에 놓거나 침실 침대협탁 옆에 놓아도 아름다운 풍경이 될 수 있습니다. 본체는 유백색 무광택 질감으로 만들어져 있어 프로젝터가 더욱 고급스러워 보일 뿐만 아니라 촉감의 편안함도 향상됩니다. 베이지색 가죽 느낌의 소재가 전체적인 외관에 따뜻함과 우아함을 더해줍니다. 이러한 색상과 소재의 조합은 현대 주택의 미적 트렌드에 부합할 뿐만 아니라 다음과 같은 인테리어에도 통합될 수 있습니다.

Huntkey MX750P 전체 모듈 전원 공급 장치 검토: 750W의 집중된 백금 강도 Mar 28, 2024 pm 03:20 PM

ITX 플랫폼은 컴팩트한 크기로 궁극적이고 독특한 아름다움을 추구하는 많은 플레이어를 끌어 모았습니다. 제조 공정의 개선과 기술 발전으로 Intel의 14세대 Core와 RTX40 시리즈 그래픽 카드 모두 ITX 플랫폼에서 강점을 발휘할 수 있으며, 게이머 또한 SFX 전원 공급 장치에 대한 요구 사항이 더 높습니다. 게임 매니아인 Huntkey는 고성능 요구 사항을 충족하는 ITX 플랫폼에서 새로운 MX 시리즈 전원 공급 장치를 출시했습니다. MX750P 풀 모듈 전원 공급 장치는 최대 750W의 정격 전력을 가지며 80PLUS 플래티넘 레벨 인증을 통과했습니다. 아래에서는 이 전원 공급 장치에 대한 평가를 가져옵니다. Huntkey MX750P 풀 모듈 전원 공급 장치는 심플하고 패셔너블한 디자인 컨셉을 채택하고 있으며 플레이어가 선택할 수 있는 두 가지 흑백 모델이 있습니다. 둘 다 무광택 표면 처리를 사용하고 은회색과 빨간색 글꼴로 질감이 좋습니다.

4K HD 영상을 쉽게 이해해보세요! 이 대규모 다중 모드 모델은 웹 포스터의 내용을 자동으로 분석하여 작업자에게 매우 편리합니다. Apr 23, 2024 am 08:04 AM

PDF, 웹페이지, 포스터, 엑셀 차트의 내용을 자동으로 분석할 수 있는 대형 모델은 파트타임 근로자에게 그다지 편리하지 않습니다. Shanghai AILab, 홍콩 중문대학교 및 기타 연구 기관에서 제안한 InternLM-XComposer2-4KHD(약칭 IXC2-4KHD) 모델은 이를 현실로 만듭니다. 해상도 제한이 1500x1500 이하인 다른 다중 모드 대형 모델과 비교하여, 이 작업은 다중 모드 대형 모델의 최대 입력 이미지를 4K(3840x1600) 이상의 해상도로 높이고 모든 화면비와 336픽셀을 4K로 지원합니다. 동적 해상도가 변경됩니다. 모델은 출시 3일 만에 허깅페이스 비주얼 질문답변 모델 인기 순위 1위를 차지했다. 취급이 용이함

Colourful Hidden Star P15 24 리뷰: 멋진 외관과 성능을 모두 갖춘 하드코어 만능 게이밍 노트북 Mar 06, 2024 pm 04:40 PM

급속한 기술 발전이 이루어지는 현 시대에 노트북은 사람들의 일상 생활과 업무에 없어서는 안 될 중요한 도구가 되었습니다. 높은 성능을 요구하는 플레이어의 경우 강력한 구성과 탁월한 성능을 갖춘 노트북이 하드코어 요구 사항을 충족할 수 있습니다. 뛰어난 성능과 눈부신 디자인을 갖춘 컬러풀 히든스타 P15 노트북은 하드코어 노트북의 대명사라 할 수 있는 미래의 선두주자로 자리매김했습니다. 컬러풀 히든스타(Colorful Hidden Star) P1524는 13세대 인텔 코어 i7 프로세서와 RTX4060노트북 GPU를 탑재해 더욱 패셔너블한 우주선 디자인 스타일을 채택해 세부적으로 뛰어난 성능을 자랑한다. 먼저 이 노트북의 특징을 살펴보겠습니다. Supreme은 Intel Core i7-13620H 프로세서로 구동됩니다.

Baidu Tieba에서 자신의 게시물을 삭제하는 방법 자신의 게시물을 삭제하는 방법 목록 Mar 12, 2024 pm 05:25 PM

우리는 이 플랫폼을 사용할 때 위의 기능 중 일부에 대해 잘 알고 있어야 하며, 어떤 측면에 있든 거기에 많은 게시물이 있다는 것을 알 수 있습니다. 일부 게시물 등을 통해 다양한 측면에서 일부 선택이 가능하다고 느낄 때마다 오늘은 위 기능의 사용을 더 잘 이해하고 게시물의 품질을 보장하기 위해 직접 다음을 수행하는 것이 가능합니다. 위의 글 중 일부를 삭제했는데, 어떻게 해야 할지 모르겠다면 오늘 편집자가 삭제 방법을 설명해 드릴 것입니다. 관심이 있고 아이디어가 있는 친구들은 지금 편집자에게 이야기해 보시기 바랍니다. 나는 당신이 그것을 좋아할 것 같아요. 삭제

게임하기에는 좋은 화면입니다. iQOO Neo9S Pro+ 화면에 대한 간략한 분석입니다. Jul 19, 2024 pm 03:53 PM

오늘날 스마트폰 시장에서 화면 품질은 휴대폰의 전반적인 성능을 측정하는 주요 지표 중 하나가 되었습니다. iQOO의 Neo 시리즈는 항상 사용자에게 뛰어난 게임 경험과 시각적 즐거움을 제공하기 위해 노력해 왔습니다. 최신 제품인 iQOO Neo9SPro+는 "Three Good Eye Protection Gaming Screen"을 사용합니다. 다음으로 이 화면의 품질이 얼마나 뛰어난지 살펴보겠습니다. iQOO Neo9S Pro+에는 1Hz~144Hz의 플래그십 LTPO 적응형 새로 고침 빈도를 지원하는 1.5 KOLED e스포츠 다이렉트 화면이 장착되어 있어 정적 콘텐츠를 표시할 때 초저전력 대기 상태를 달성할 수 있으며 지능적일 수도 있습니다. 게임 중에는 90Hz에서 144Hz로 동적 높음으로 전환합니다.

See all articles