CSS3를 사용하여 3D 뒤집기 책 효과를 얻는 방법-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS3를 사용하여 3D 뒤집기 책 효과를 얻는 방법

不言

Jun 25, 2018 pm 04:56 PM

3d css3

이 글에서는 CSS3에서 구현한 3D 뒤집기 책 효과를 주로 소개합니다. 새로운 CSS3 속성인 애니메이션과 변환을 기반으로 비슷한 뒤집기 책 효과를 구현한 것이므로 관심 있는 친구들이 참고할 수 있습니다. 렌더링: ( 스타일이 약간 보기 흉합니다. 무시해도 됩니다. 효과는 좋을 것입니다. 나중에 쉽게 변경할 수 있도록 다른 프로젝트에 추가할 수 있습니다. 0.0)

책을 넘기는 효과와 비슷합니다. 원래 의미는 JS를 사용하여 한 번 클릭한 후 setInterval을 사용하여 책 페이지가 뒤집히는 애니메이션을 제어하려면 책 페이지가 180° 회전할 때 setInterval을 지우지만 계속 클릭하면 책 페이지가 180° 회전하지 않으면 이전 작업을 계속 완료할 수 없습니다. setInterval을 지우는 방법을 사용할 수 있지만 항상 애니메이션 효과가 좋지 않다는 느낌이 듭니다. 물론 다른 해결 방법도 있지만 갑자기 발생합니다. CSS3가 애니메이션을 제공한다는 생각이 들었습니다. 애니메이션 애니메이션을 추가하면 이 문제를 직접 피할 수 있습니다. 애니메이션은 매번 실행되므로 연결된 점이 나타나면 아래의 코드와 구현 단계를 붙여넣으면 각 페이지가 자연스럽게 전환됩니다.

참고: 이 예제의 JS 부분은 네이티브 JS로 작성되었습니다. 네이티브 JS를 잘 사용하지 못하는 경우 jQuery를 사용할 수 있습니다. 및 기타 타사 프레임워크를 사용하여 다시 작성합니다.

html 부분: (이 부분은 진심입니다... 잊어버리세요. 그냥 추하게 만들어 보세요~.~)

<body>
    <!-- 所展示的书的内容 -->
    <p class="book">
        <p class="page">
            <span>1</span>
            <span>2</span>
        </p>
        <p class="page">
            <span>3</span>
            <span>4</span>
        </p>
        <p class="page">
            <span>5</span>
            <span>6</span>
        </p>
        <p class="page">
            <span>7</span>
            <span>8</span>
        </p>
        <p class="page">
            <span>9</span>
            <span>10</span>
        </p>
        <p class="page">
            <span>11</span>
            <span>12</span>
        </p>
        <p class="page">
            <span>13</span>
            <span>14</span>
        </p>
        <p class="page">
            <span>15</span>
            <span>16</span>
        </p>
        <p class="page">
            <span>17</span>
            <span>18</span>
        </p>
        <p class="page">
            <span>19</span>
            <span>20</span>
        </p>
    </p>
    <!-- 用来控制上一页和下一页操作 -->
    <input type="button" value="上一页" id="before"/>
    <input type="button" value="下一页" id="after"/>
</body>

로그인 후 복사

CSS 부분: (변환에서 회전 값을 변경하여, 책 페이지 넘기기 효과 구현)

<style>   
        .book{   
            width: 460px;   
            height: 300px;   
            position: relative;   
            margin: 150px 400px;   
            -webkit-transform-style: preserve-3d;   
            -moz-transform-style: preserve-3d;   
            -ms-transform-style: preserve-3d;   
            transform-style: preserve-3d;   
            transform: rotatex(30deg);   
        }   
        .page{   
            width: 230px;   
            height: 300px;   
            border: 1px solid #666;   
            position: absolute;   
            rightright: 0;   
            transform-origin: left;   
            transform-style: preserve-3d;   
            backface-visibility:hidden;   
            font-size: 60px;   
            text-align: center;   
            line-height: 300px;   
        }   
        .page span{   
            display: block;   
            width: 100%;   
            position: absolute;   
            background-color: #00FFFF;   
        }   
        .page span:nth-child(2){   
            transform: rotatey(-180deg);   
            backface-visibility:hidden;   
        }   
        /*以下两个动画可以只使用第一个，animation中有reverse，可以反向执行动画， 
            使用时需要在JS中点击上一页时添加改属性值*/
        /*翻书下一页的动画*/
        @keyframes page {   
            0%{   
                transform: rotatey(0deg);   
            }   
            100%{   
                transform: rotatey(-180deg);   
                z-index: 10;   
            }   
        }   
        /*翻书上一页的动画*/
        @keyframes page1 {   
            0%{   
                transform: rotatey(-180deg);   
                z-index: 10;   
            }   
            100%{   
                transform: rotatey(0deg);   
            }   
        }   
    </style>

로그인 후 복사

JS 부분 (JS 부분은 주로 이전/다음 페이지 클릭 시 해당 p에 애니메이션 속성을 추가하는 부분을 구현합니다.)

<script>   
    var before = document.querySelector("#before");   
    var after = document.querySelector("#after");   
    var book = document.querySelector(".book");   
    var page = document.getElementsByClassName("page"); 7     rotate();   
    function rotate(){   
        var middle = 0;12         for(var z=0;z<book.children.length;z++){   
            page[z].style.zIndex = book.children.length-z;   
        }   
        after.onclick = function(){   
            if(middle != book.children.length){   
                page[middle].style.animation = "page 1.5s linear 1 forwards";   
                middle++;   
            }else{   
                middle = book.children.length;   
            }   
        };   
        before.onclick = function(){   
            if(middle != 0){   
                page[middle-1].style.animation = "page1 1.5s linear 1 forwards";   
                middle--;   
        }else{   
            middle = 0;   
            }   
        }   
    }   
</script>

로그인 후 복사

마지막 JS 부분에 대해서는, 주요 기능은 이전/다음 페이지 클릭 시 해당 p에 애니메이션 속성을 추가하는 것입니다. 애니메이션에 대한 자세한 설명은 API를 확인해야 합니다.

호환성 문제로 인해 여기서 더 나은 해결책은 애니메이션 대신 클래스를 추가하는 것입니다. 더 많은 브라우저에 적용하려면 -webkit-, -moz-······· 접두사를 추가해야 합니다. 이러한 것들을 클래스에 추가하고 클래스를 직접 추가하거나, 필요한 문자열을 직접 출력할 수 있도록 함수를 작성하고 캡슐화하면 됩니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

핫 AI 도구

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

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

SublimeText3 중국어 버전

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

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

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

뜨거운 주제

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

7662

Cakephp 튜토리얼

1393

C# 튜토리얼

1205

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

Win11 활성화 키 영구

Related knowledge

순수한 CSS3로 물결 효과를 얻는 방법은 무엇입니까? (코드 예) Jun 28, 2022 pm 01:39 PM

순수한 CSS3로 물결 효과를 얻는 방법은 무엇입니까? 이 기사에서는 SVG 및 CSS 애니메이션을 사용하여 물결 효과를 만드는 방법을 소개합니다. 도움이 되길 바랍니다.

자율주행 분야에서 Gaussian Splatting이 인기를 끌면서 NeRF가 폐기되기 시작한 이유는 무엇입니까? Jan 17, 2024 pm 02:57 PM

위에 작성됨 및 저자의 개인적인 이해 3DGS(3차원 가우스플래팅)는 최근 몇 년간 명시적 방사선장 및 컴퓨터 그래픽 분야에서 등장한 혁신적인 기술입니다. 이 혁신적인 방법은 수백만 개의 3D 가우스를 사용하는 것이 특징이며, 이는 주로 암시적 좌표 기반 모델을 사용하여 공간 좌표를 픽셀 값에 매핑하는 NeRF(Neural Radiation Field) 방법과 매우 다릅니다. 명시적인 장면 표현과 미분 가능한 렌더링 알고리즘을 갖춘 3DGS는 실시간 렌더링 기능을 보장할 뿐만 아니라 전례 없는 수준의 제어 및 장면 편집 기능을 제공합니다. 이는 3DGS를 차세대 3D 재구성 및 표현을 위한 잠재적인 게임 체인저로 자리매김합니다. 이를 위해 우리는 처음으로 3DGS 분야의 최신 개발 및 관심사에 대한 체계적인 개요를 제공합니다.

Microsoft Teams의 3D Fluent 이모티콘에 대해 알아보기 Apr 24, 2023 pm 10:28 PM

특히 Teams 사용자라면 Microsoft가 업무 중심 화상 회의 앱에 새로운 3DFluent 이모티콘을 추가했다는 사실을 기억해야 합니다. Microsoft가 작년에 Teams 및 Windows용 3D 이모티콘을 발표한 후 실제로 플랫폼용으로 업데이트된 기존 이모티콘이 1,800개 이상 나타났습니다. 이 큰 아이디어와 Teams용 3DFluent 이모티콘 업데이트 출시는 공식 블로그 게시물을 통해 처음 홍보되었습니다. 최신 Teams 업데이트로 FluentEmojis가 앱에 제공됩니다. Microsoft는 업데이트된 1,800개의 이모티콘을 매일 사용할 수 있다고 밝혔습니다.

카메라 또는 LiDAR를 선택하시겠습니까? 강력한 3D 객체 감지 달성에 대한 최근 검토 Jan 26, 2024 am 11:18 AM

0. 전면 작성&& 자율주행 시스템은 다양한 센서(예: 카메라, 라이더, 레이더 등)를 사용하여 주변 환경을 인식하고 알고리즘과 모델을 사용하는 고급 인식, 의사결정 및 제어 기술에 의존한다는 개인적인 이해 실시간 분석과 의사결정을 위해 이를 통해 차량은 도로 표지판을 인식하고, 다른 차량을 감지 및 추적하며, 보행자 행동을 예측하는 등 복잡한 교통 환경에 안전하게 작동하고 적응할 수 있게 되므로 현재 널리 주목받고 있으며 미래 교통의 중요한 발전 분야로 간주됩니다. . 하나. 하지만 자율주행을 어렵게 만드는 것은 자동차가 주변에서 일어나는 일을 어떻게 이해할 수 있는지 알아내는 것입니다. 이를 위해서는 자율주행 시스템의 3차원 객체 감지 알고리즘이 주변 환경의 객체의 위치를 포함하여 정확하게 인지하고 묘사할 수 있어야 하며,

CLIP-BEVFormer: BEVFormer 구조를 명시적으로 감독하여 롱테일 감지 성능을 향상시킵니다. Mar 26, 2024 pm 12:41 PM

위에 작성 및 저자의 개인적인 이해: 현재 전체 자율주행 시스템에서 인식 모듈은 중요한 역할을 합니다. 자율주행 시스템의 제어 모듈은 적시에 올바른 판단과 행동 결정을 내립니다. 현재 자율주행 기능을 갖춘 자동차에는 일반적으로 서라운드 뷰 카메라 센서, 라이더 센서, 밀리미터파 레이더 센서 등 다양한 데이터 정보 센서가 장착되어 다양한 방식으로 정보를 수집하여 정확한 인식 작업을 수행합니다. 순수 비전을 기반으로 한 BEV 인식 알고리즘은 하드웨어 비용이 저렴하고 배포가 용이하며, 출력 결과를 다양한 다운스트림 작업에 쉽게 적용할 수 있어 업계에서 선호됩니다.

Windows 11의 Paint 3D: 다운로드, 설치 및 사용 가이드 Apr 26, 2023 am 11:28 AM

새로운 Windows 11이 개발 중이라는 소문이 퍼지기 시작했을 때 모든 Microsoft 사용자는 새 운영 체제가 어떤 모습일지, 어떤 결과를 가져올지 궁금해했습니다. 추측 끝에 Windows 11이 여기에 있습니다. 운영 체제에는 새로운 디자인과 기능 변경이 포함되어 있습니다. 일부 추가 기능 외에도 기능 지원 중단 및 제거가 함께 제공됩니다. Windows 11에 없는 기능 중 하나는 Paint3D입니다. 서랍, 낙서, 낙서에 적합한 클래식 페인트를 계속 제공하지만 3D 제작자에게 이상적인 추가 기능을 제공하는 Paint3D를 포기합니다. 몇 가지 추가 기능을 찾고 있다면 최고의 3D 디자인 소프트웨어로 Autodesk Maya를 추천합니다. 좋다

카드 한장으로 30초만에 가상 3D 아내를 만나보세요! Text to 3D는 Maya, Unity 및 기타 제작 도구와 원활하게 연결되어 명확한 모공 세부 정보를 갖춘 고정밀 디지털 휴먼을 생성합니다. May 23, 2023 pm 02:34 PM

ChatGPT는 AI 산업에 닭의 피를 주입했고, 한때 상상할 수 없었던 모든 것이 오늘날 기본적인 관행이 되었습니다. 계속해서 발전하고 있는 Text-to-3D는 Diffusion(이미지), GPT(텍스트)에 이어 AIGC 분야의 차세대 핫스팟으로 평가되며 전례 없는 주목을 받고 있습니다. 아니요, ChatAvatar라는 제품은 공개 베타 버전으로 출시되어 빠르게 700,000회 이상의 조회수와 관심을 얻었으며 Spacesofttheweek에 소개되었습니다. △ChatAvatar는 AI가 생성한 단일 시점/다중 시점 원본 그림에서 3D 스타일화된 캐릭터를 생성하는 Imageto3D 기술도 지원합니다. 현재 베타 버전에서 생성된 3D 모델은 큰 주목을 받았습니다.