CSS を使用して 3D ページめくり効果を作成する-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS を使用して 3D ページめくり効果を作成する

php中世界最好的语言

Mar 20, 2018 pm 02:00 PM

css効果

今回は CSS を使用して 3D ページめくり効果を作成する方法を説明します。 CSS を使用して 3D ページめくり効果を作成するための注意事項は何ですか。実際の事例を見てみましょう。

今日から~ 編集者が一連の Web フロントエンド特殊効果コレクションを紹介します。クールなエフェクトで遊ぶのが好きな友達、ぜひご覧ください ~

。

最初の問題は、純粋な CSS を使用して本の 3D ページめくり効果を実現する方法を共有しましょう。関連する CSS コードは次のとおりです:

nbsp;html>


  <meta>
  <title>cloth</title>
  <style>
   
html,body {
  height:100%;
  overflow: hidden;
}
body {
  background: -webkit-radial-gradient(#E4CEA6, #9C8763);
  background: radial-gradient(#E4CEA6, #9C8763);
  -webkit-perspective: 900px;
          perspective: 900px;
  margin: 0;
}
#flip {
  -webkit-animation: wrapper 6s ease-in-out infinite;
          animation: wrapper 6s ease-in-out infinite;
  height: 350px;
  width: 253px; 
  position: absolute;
  left: 50%;
  top: 30%;
  -webkit-transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg)!important;
          transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg)!important;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: 0 0 0;
          transform-origin: 0 0 0;
}
@-webkit-keyframes wrapper {
  50% {
    -webkit-transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(180deg);
            transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(180deg);
  }
}
@keyframes wrapper {
  50% {
    -webkit-transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(180deg);
            transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(180deg);
  }
}
#flip p {
  height: 350px;
  width: 24px;
  position: absolute;
  left: calc(100% - 1px);
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  background-size: 253px 350px;
}
#flip #front, 
#flip #front p {
  background-image: url(http://img.hoop8.com/attachments/1512/846611208706.png);
  box-shadow: inset rgba(255,255,255,0.3) 0px -1px 0 0,#35582C 0px 1px 0px 0px;
}
#flip #front > p > p > p > p > p > p > p > p > p > p { 
  box-shadow: inset rgba(255,255,255,0.3) -1px -1px 0 0, #35582C 1px 1px 0px 0px;
}
#flip #back { -webkit-transform: rotateY(.2deg); transform: rotateY(.2deg); } /* avoid pages overlap */
#flip #back,
#flip #back p {
  background-image: url(http://img.hoop8.com/attachments/1512/846611208706.png); 
}
#flip > p {  left: 0;  background-position-x: 0; }
#flip p > p { background-position-x: -23px; -webkit-animation: page 6s ease-in-out infinite; animation: page 6s ease-in-out infinite; }
#flip p > p > p { background-position-x : -46px; } 
#flip p > p > p > p { background-position-x : -69px; }
#flip p > p > p > p > p { background-position-x : -92px; }
#flip p > p > p > p > p > p { background-position-x : -115px; }
#flip p > p > p > p > p > p > p { background-position-x : -138px; }
#flip p > p > p > p > p > p > p > p  { background-position-x : -161px; }
#flip p > p > p > p > p > p > p > p > p { background-position-x : -184px; }
#flip p > p > p > p > p > p > p > p > p > p { background-position-x : -207px; }
#flip p > p > p > p > p > p > p > p > p > p > p { background-position-x : -229px; }
/* the more pieces you have, the smoother the bend is */
@-webkit-keyframes page {
  15% { -webkit-transform: rotateY(-10deg); transform: rotateY(-10deg); }
  50% { -webkit-transform: rotateY(-2deg); transform: rotateY(-2deg); }
  65% { -webkit-transform: rotateY(10deg); transform: rotateY(10deg); }
  100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
}
@keyframes page {
  15% { -webkit-transform: rotateY(-10deg); transform: rotateY(-10deg); }
  50% { -webkit-transform: rotateY(-2deg); transform: rotateY(-2deg); }
  65% { -webkit-transform: rotateY(10deg); transform: rotateY(10deg); }
  100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
}
#book {
  width: 248px;
  height: 350px;
  position: absolute;
  left:50%;
  top: 30%;
  -webkit-transform: translate3d(0px,0px,-10px) rotateX(60deg) rotateZ(29deg);
          transform: translate3d(0px,0px,-10px) rotateX(60deg) rotateZ(29deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: 0 0 0;
}
@-webkit-keyframes book {
  25% {
    box-shadow: inset rgba(0,0,0,.2) 0px 0 50px -140px;
  }
  50% {
    box-shadow: inset rgba(0,0,0,.2) 0px 0 50px -140px;
  }
  100% {
    box-shadow: inset rgba(0,0,0,.2) 510px 0 50px -140px;
  }
}
@keyframes book {
  25% {
    box-shadow: inset rgba(0,0,0,.2) 0px 0 50px -140px;
  }
  50% {
    box-shadow: inset rgba(0,0,0,.2) 0px 0 50px -140px;
  }
  100% {
    box-shadow: inset rgba(0,0,0,.2) 510px 0 50px -140px;
  }
}
#book #top {
  -webkit-animation: book 6s ease-in-out infinite;
          animation: book 6s ease-in-out infinite;
  background: url(http://img.hoop8.com/attachments/1512/900611208706.png);
  background-size: 100% 100%;
  background-position: 100%;
  box-shadow: inset rgba(0,0,0,0.2) 510px 0 50px -140px;
  height: 350px;
  width: 248px;
  position: absolute;
  left: 0;
  top: 0;
}
#book #bottom {
  background: #E7DED1;
  box-shadow: rgba(83, 53, 13, 0.2) 4px 2px 1px,
              #35582C 1px 1px 0px 0px;
  height: 350px;
  width: 253px;
  position: absolute;
  -webkit-transform: translateZ(-40px);
          transform: translateZ(-40px);
  left: 0;
  top: 0;
}
#book #shadow {
  -webkit-animation: shadow 6s ease-in-out infinite;
          animation: shadow 6s ease-in-out infinite;
  box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
  height: 350px;
  width: 248px;
  position: absolute;
  left: -100%;
  top: 0;
  -webkit-transform: translateZ(-40px);
          transform: translateZ(-40px);
}
@-webkit-keyframes shadow {
  20% {
    box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
  }
  50% { 
    box-shadow: inset rgba(83, 53, 13, 0.3) -350px 0 150px -140px;
  }
  60% { 
    box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
  }
}
@keyframes shadow {
  20% {
    box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
  }
  50% { 
    box-shadow: inset rgba(83, 53, 13, 0.3) -350px 0 150px -140px;
  }
  60% { 
    box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
  }
}
#book #front {
  background: -webkit-linear-gradient(top,#FCF6EA, #D8D1C3);
  background-size: 100% 2px; 
  box-shadow: inset #C2BBA2 3px 0 0px, #35582C -2px 1px 0px 0px;
  height: 40px;
  width: 251px;
    left: -3px;
  position: absolute;
  bottom: -40px;
  -webkit-transform: rotateX(-90deg);
          transform: rotateX(-90deg);
  -webkit-transform-origin: 50% 0;
          transform-origin: 50% 0;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
#book #right {
  background: -webkit-linear-gradient(left,#DDD2BB, #BDB3A0);
  background-size: 2px 100%; 
  box-shadow: inset rgba(0,0,0,0) 0 0 0 20px;
  height: 100%;
  width: 40px;
  position: absolute;
  right: -40px;
  top: 0;
  -webkit-transform: rotateY(90deg);
          transform: rotateY(90deg);
  -webkit-transform-origin: 0 50%;
          transform-origin: 0 50%;
}
h4 {
  position: absolute;
  bottom: 20px;
  left: 20px;
  margin: 0;
  font-weight: 200;
  opacity: 1;
 font-family: sans-serif;
  color: rgba(0,0,0,0.3); 
}
/* bookmark */
#bookmark {
  position: absolute;
  -webkit-transform: translate3d(20px,350px,-16px);
          transform: translate3d(20px,350px,-16px);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
#bookmark p {
  background: rgb(151, 88, 88);
  box-shadow: rgb(133,77,77) 1px 0;
  height: 10px;
  width: 20px;
  position: absolute;
  top: 9px;
  -webkit-transform: rotateX(-14deg);
          transform: rotateX(-14deg);
  -webkit-transform-origin: 50% 0;
          transform-origin: 50% 0;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
#bookmark > p > p {
  background: -webkit-linear-gradient(top, rgb(151, 88, 88), rgb(189, 123, 123), rgb(151, 88, 88));
  background: linear-gradient(top, rgb(151, 88, 88), rgb(189, 123, 123), rgb(151, 88, 88));
}
#bookmark > p > p > p {
  background: -webkit-linear-gradient(top,rgb(151, 88, 88),rgb(133, 77, 77));
  background: linear-gradient(top,rgb(151, 88, 88),rgb(133, 77, 77));
}
#bookmark > p > p > p > p {
  background: none;
  border-top: 0px solid transparent;
  border-right: 10px solid rgb(133, 77, 77);
  border-bottom: 10px solid transparent;
  border-left: 10px solid rgb(133, 77, 77);
  height: 0;
  width: 0;
}
#bookmark-shadow {
  background: -webkit-linear-gradient(top,rgba(83, 53, 13, 0.25),rgba(83, 53, 13, 0.11));
  background: linear-gradient(top,rgba(83, 53, 13, 0.25),rgba(83, 53, 13, 0.11));
  height: 15px;
  width: 20px;
  position: absolute;
  -webkit-transform: translate3d(12px,350px,-25px) rotateX(-90deg) skewX(20deg);
          transform: translate3d(12px,350px,-25px) rotateX(-90deg) skewX(20deg);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
}
  </style>

  

  
  <p>
  </p><p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p>
    </p><p>
      </p><p>
        </p><p>
          </p><p></p>
        
      
    
  
  <p></p>

<p>
  </p><p>
    </p><p>
      </p><p>
        </p><p>
          </p><p>
            </p><p>
              </p><p>
                </p><p>
                  </p><p>
                    </p><p>
                      </p><p></p>
                    
                  
                
              
            
          
        
      
    
  
  <p>
    </p><p>
      </p><p>
        </p><p>
          </p><p>
            </p><p>
              </p><p>
                </p><p>
                  </p><p>
                    </p><p>
                      </p><p></p>
                    
                  
                
              
            
          
        
      
    
  

<h4 id="CSS实现-D翻书效果">CSS实现3D翻书效果</h4>

この事例を読んだ後、あなたはその方法をマスターしたと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事にご注目ください。

推奨読書:

H5 APP モニタリングリターンイベント処理

h5 は複数の画像プレビューアップロードとクリック可能なドラッグコントロールを実装します

以上がCSS を使用して 3D ページめくり効果を作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

擬似要素は子供であることを少し思い出させてください。Apr 19, 2025 am 11:39 AM

ここに＆＃039;いくつかの子供の要素を持つ容器があります：

「ダイナミックヒットエリア」のメニューApr 19, 2025 am 11:37 AM

フライアウトメニュー！ Hoverイベントを使用してメニュー項目をより多く表示するメニューを実装する必要がある2番目の場合は、トリッキーな領域にあります。 1つは、そうすべきです

WebVTTを使用したビデオアクセシビリティの改善Apr 19, 2025 am 11:27 AM

「Webの力はその普遍性にあります。障害に関係なくすべての人からのアクセスは重要な側面です。」

毎週のプラットフォームニュース：CSS ::マーカー擬似エレメント、事前レンダリングWebコンポーネント、サイトへのウェブメントの追加Apr 19, 2025 am 11:25 AM

今週、＃039;のラウンドアップ：DatePickersはキーボードユーザーのHeadachesを提供しています。これは、Foucとの戦いに役立つ新しいWebコンポーネントコンパイラであり、最終的にスタイリングリストのアイテムマーカーと、サイトでWebメントを取得するための4つのステップを手に入れます。

幅と柔軟なアイテムを作ることは、一緒にうまく機能しますApr 19, 2025 am 11:23 AM

簡単な答え：フレックスシュリンクとフレックスベイズは、おそらくあなたが探しているものです。

スティッキーヘッダーとテーブルヘッダーを位置付けますApr 19, 2025 am 11:21 AM

＆＃039; t position：sticky; a

毎週のプラットフォームニュース：検索コンソールでのHTML検査、スクリプトのグローバル範囲、Babel Envがデフォルトクエリを追加するApr 19, 2025 am 11:18 AM

今週のWebプラットフォームニュースの世界を見回すと、Google Searchコンソールによりクロールされたマークアップの表示が簡単になります。

indiebebとウェブメントApr 19, 2025 am 11:16 AM

indiewebは何かです！彼らは会議が近づいてきました。ニューヨーカーはそれについても書いています：

See all articles

ホットAIツール

ホットツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。