「CSS3 2D 変換技術 - トランスレートの実践的な開発」 の記事では、CSS3 の 2D 変換メソッド
1.1.
1. をリストしました。 4. skew() 5. matrix()
同時に、最初のメソッドtranslate()について非常に詳しく説明し、全員が実際にナビゲーションバーを開発できるように導きました。翻訳を知らない、またはあまり詳しくない場合は、私のブログ投稿
「CSS3 2D 変換技術 - 翻訳の実践開発」 を読んでください。
知識ポイントを説明する前に、プログラマーの中には、transform を適用した後になぜ機能しないのかを尋ねる方もいます。実際、CSS3 のtransform はブロックレベルの要素またはインライン要素に対してのみ機能します。 。
この章では、今日の
フォトウォールの実践的な開発を探っていきます。さて、さっそく今日のテーマにいきましょう。
回転は、名前が示すように、回転を意味します。つまり、ブロック要素またはインライン要素に回転を適用すると、回転効果が得られます。
構文:
-webkit-transform: rotate(20deg); /*兼容chrome与safari*/-moz-transform: rotate(20deg); /*兼容firefox*/-o-transform: rotate(20deg); /*兼容opera*/-ms-transform: rotate(20deg); /*兼容IE9*/transform: rotate(20deg); /*标准语法*/
rotate
メソッドのパラメータが正の数の場合、それは時計回りを意味します回転。負の場合は反時計回りの回転を意味します。
文法の説明が終わったので、次はフォト ウォールを作成する方法を段階的に説明します。効果は次のとおりです。
さて、レンダリングに従って、表示領域: 1 つの領域には木の板の背景が表示され、3 つの領域には対応する写真が表示されます。ステップごとに説明します:
1. 表示領域を定義します
!DOCTYPE html><html><head> <meta charset=”utf-8″> <link href=”styles.css” rel=”stylesheet”> <!? css,css3,html,html5,javascript,div,jquery,nodejs,extjs,bootstrap,pure ?> <title>CSS3 2D转换技术之rotate实战开发</title> </head> <body> <a href="http://www.itdriver.cn">实战互联网</a> <div> <div> <img src=”http://pic1.win4000.com/wallpaper/a/53900aafbf5d6.jpg” width=”256″ height=”200″> <p>那一刻，我在这儿感受世外桃源的安逸</p> <p>作者: 陌上花会开</p> </div> <div> <img src=”http://image.tianjimedia.com/uploadImages/2013/259/8XYI3I1E88WN_1000x500.jpg” width=”256″ height=”200″> <p>喜欢你的微笑，喜欢阳光下的味道</p> <p>作者: 陌上花会开</p> </div> <div> <img src=”http://image.tianjimedia.com/uploadImages/2013/308/N8457O6CJS7W_1000x500.jpg” width=”256″ height=”200″> <p>漫山的葵花盛开了</p> <p>作者: 陌上花会开</p> </div> </div> </body></html>
この時点での実行効果:
2. スタイルを実装しますフォトウォール用 photo_wall 、背景画像を適用し、フォト ウォールの余白を設定し、CSS3 を使用して流動的なレイアウトを設定して、フォト ウォールに写真を表示します。
CSS3の流動的なレイアウトを知らない、または慣れていない場合は、私の他のブログ投稿を読んでください。きっとこの機能に習熟できると思います
「CSS3 実践開発: フレキシブル ボックス モデルのレスポンシブ WEB インターフェイス デザイン」。
*{ /*清空所有元素默认的外边距和内边距*/ margin:0; padding:0;} .photo_wall{ background:url(bg.jpg); /*定义照片墙的默认背景*/ background-size:cover; /*使照片墙的背景填充照片墙*/ width:1200px; /*设置照片墙的宽高*/ height:800px; margin:40px auto; /*设置照片墙的外边距*/ display:-webkit-box; /*使用CSS3的盒模型之流式布局*/ display:-moz-box; display:box; -webkit-box-align:center; /*定义盒模型内部元素在垂直方向上居于中间位置*/ -moz-box-align:center; box-align:center; -webkit-box-pack:center; /*定义盒模型内部元素在水平方向上居于中间位置*/ -moz-box-pack:center; box-pack:center;}
この時のランニングエフェクト:
3番目に、スタイル
photo_frame
を写真に適用し、写真の余白とサイズを設定します。テキストの写真内に影効果を追加します。
.photo_wall .photo_frame{ text-align:center; /*照片内的文字都是居中显示*/ padding:10px 10px 30px 10px; /*定义照片的内补白*/ /*设置照片的背景颜色*/ font-size:.8em; /*照片内文字的大小*/ box-shadow:.2em .2em .8em #130c0e; /*给照片添加阴影效果，富有立体感*/} .photo_frame p{ margin-top:10px; /*设置照片内显示文字段落的外上边距*/}
この時のランニング効果:
ここまでで、写真の基本的な外観が見えてきました。今日学んだことを応用してみましょうコンテンツ、回転を追加写真効果を追加すると、写真がより階層化され、よりパーソナライズされたものになります。
4. スタイル photo01、photo02、photo03 をそれぞれ写真に適用します。各写真は、独自に設定された回転基点に基づいて回転されます。コードは次のとおりです:
.photo01{ -webkit-transform-origin:right bottom; /*定义照片1的旋转基点为 右下角*/ -moz-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:rotate(10deg); /*以基点为轴，在2D空间内顺时针旋转10度*/ -moz-transform:rotate(10deg); -o-transform:rotate(10deg); transform:rotate(10deg);} .photo02{ -webkit-transform-origin:right bottom; /*定义照片2的旋转基点为 右下角*/ -moz-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:rotate(-20deg); /*以基点为轴，在2D空间内逆时针旋转20度*/ -moz-transform:rotate(-20deg); -o-transform:rotate(-20deg); transform:rotate(-20deg);} .photo03{ -webkit-transform-origin:left top; /*定义照片3的旋转基点为 左上角*/ -moz-transform-origin:left top; transform-origin:left top; -webkit-transform:rotate(40deg); /*以基点为轴，在2D空间内顺时针旋转40度*/ -moz-transform:rotate(40deg); -o-transform:rotate(40deg); transform:rotate(40deg);}
この時点での実行効果:
この時点で、
「CSS3 実践開発: ステップバイステップのフォトウォール実装を教えます」戦争と開発』が終了しました。読んでくださった皆様、ありがとうございました。
もっと面白い実践的なチュートリアルを次々に更新していきますので、お楽しみに！
インターネット技術交換 QQ グループへようこそ: 62329335
個人的な声明: 共有されたブログ投稿は完全にオリジナルであり、私たちは実践的なデモンストレーションを通じてあらゆる知識ポイントを検証するよう努めています。🎜 🎜
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
