CSS3实战开发:手把手教你照片墙实战开发_html/css_WEB-ITnose
在 《CSS3 2D转换技术之translate实战开发》文章中，我给大家列出了 CSS3中的2D转换方法：
1. translate() 2. rotate() 3. scale() 4. skew() 5. matrix()
同时对第一个方法 translate()做了非常详尽的介绍，并带领大家实战开发了一个导航条。如果你对translate不了解或不是太熟悉，请阅读我的博文 《CSS3 2D转换技术之translate实战开发》 。
在讲解知识点之前，我先跟大家说明一下，有些程序员会问，为什么我应用了transform后不起作用呢，其实CSS3中的transform是对块级元素或者行内元素才起作用的。
本章我将带领大家一起来探索今天的 照片墙实战开发吧。好了，废话少说，直接进入今天的主题吧。
rotate，顾名思义，是表示旋转的意思，也就是说，如果我们给一个块元素或一个行内元素应用了rotate之后，它会发生旋转的效果。
语法：
-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方法的参数如果是正数，则表示顺时针旋转；如果是负数，则表示逆时针旋转。
语法讲解完了，我现在手把手教大家开发一个照片墙，效果如下：
ok，根据效果图，我们拆分一下显示区域：一个区域显示木板背景，三个区域显示相应照片。下面就跟着我的一步步的学习吧：
一、 定义显示区域
!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” style="max-width:90%"CSS3实战开发:手把手教你照片墙实战开发_html/css_WEB-ITnose" > <p>那一刻，我在这儿感受世外桃源的安逸</p> <p>作者: 陌上花会开</p> </div> <div> <img src=”http://image.tianjimedia.com/uploadImages/2013/259/8XYI3I1E88WN_1000x500.jpg” style="max-width:90%"CSS3实战开发:手把手教你照片墙实战开发_html/css_WEB-ITnose" > <p>喜欢你的微笑，喜欢阳光下的味道</p> <p>作者: 陌上花会开</p> </div> <div> <img src=”http://image.tianjimedia.com/uploadImages/2013/308/N8457O6CJS7W_1000x500.jpg” style="max-width:90%"CSS3实战开发:手把手教你照片墙实战开发_html/css_WEB-ITnose" > <p>漫山的葵花盛开了</p> <p>作者: 陌上花会开</p> </div> </div> </body></html>
此时运行效果:
二、给照片墙实现样式 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;}此时运行效果：
三、给照片应用样式 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; /*设置照片内显示文字段落的外上边距*/}
此时的运行效果：
到目前为止，照片的基本样子已经出来了，接着应用我们今天所学的内容，给照片添加旋转效果吧，这样将使照片更富层次感，且更加个性化。
四、分别给照片应用样式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
个人申明：所分享博文，绝对原创，并力争每一个知识点都通过实战演示来进行验证。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何在Windows 11中按收藏夾對照片進行排序
Mar 18, 2024 am 09:37 AM
在本文中，我們將介紹如何在Windows11中使用收藏夾功能對照片進行排序。 Windows中的照片應用程式提供了一個方便的功能，可讓您將特定照片或影片標記為「收藏夾」或「首選項」。一旦將這些項目標記為收藏夾，它們將自動整理到一個獨立的資料夾中，讓您可以輕鬆瀏覽喜愛的內容，而無需搜尋整個照片庫。這個功能使您能夠快速訪問和管理您最喜歡的照片和視頻，為您節省了大量時間和精力。通常情況下，Favorites資料夾中的照片會按日期降序排列，這樣最新的照片會先顯示，然後是時間較早的照片。但是，如果你希望將重點放
如何在iPhone上停用隱藏和最近刪除的照片的Face ID或Touch ID
Mar 04, 2024 pm 04:40 PM
Apple的照片應用程式提供了一項功能，可以將照片鎖定在「隱藏」和「最近刪除」相簿中，以確保它們不被他人窺探。這為您可能存放在這些相簿中的敏感照片和影片提供了額外的保護層，因為它們被鎖定在iPhone的面容ID、觸控ID或裝置密碼後面。如果您在使用此鎖定功能存取「隱藏」和「最近刪除」相簿時感到困難，您可以考慮停用它，以使內容更容易存取。本文將為您詳細解釋如何在iPhone上停用照片應用程式的FaceID或TouchID身份驗證。如何停用「照片」應用程式的面容ID或觸控ID必要：運行iOS16或更高版
iPhone 「照片」應用程式出現「無法上傳」提示該怎麼辦？
Feb 28, 2024 pm 09:00 PM
如果你開啟了iCloud照片功能，透過iPhone拍攝的照片和影片都會同步到蘋果伺服器儲存。但在同步到iCloud的過程中，可能會出現「無法上傳」的提示或相簿。通常，這種狀態會在iPhone照片應用程式的底部顯示，提示內容為「無法同步[數量]個項目到iCloud」。在「照片」App中會新增一個名為「無法上傳」的相簿。要將這些照片或影片新增至“iCloud照片”，可以嘗試將它們從“照片”App中匯出，然後重新匯入。但需要注意的是，先前應用到這些照片或影片的所有編輯內容或關鍵字都會遺失。在iPhone上
美圖相機怎麼把照片弄成黑白
Mar 28, 2024 am 09:11 AM
在這個多彩的世界裡，有時候我們也嚮往那份簡單的黑白美感。黑白濾鏡作為一種經典的影像處理方式，不僅能賦予照片一種復古而優雅的氣息，還能透過對比和明暗的變化，凸顯出圖片的主題和情感。而美圖秀秀，作為一款廣受歡迎的影像處理軟體，為我們提供了輕鬆添加黑白濾鏡的功能。那麼想要添加卻還不知道如何添加的用戶們，下文中本站小編就為大家帶來了詳細的步驟攻略介紹，快來跟著本文一起操作添加吧！手機美圖秀怎麼把照片變成黑白首先我們需要打開手機中的美圖秀秀，進入主界面之後選擇“美化圖片”，選擇我們需要修改的圖2.之後點
四款值得推薦的AI輔助程式工具
Apr 22, 2024 pm 05:34 PM
這個AI輔助程式工具在這個AI快速發展的階段，挖掘出了一大批好用的AI輔助程式工具。 AI輔助程式設計工具能夠提升開發效率、提升程式碼品質、降低bug率，是現代軟體開發過程中的重要助手。今天大姚給大家分享4款AI輔助程式工具（而且都支援C#語言），希望對大家有幫助。 https://github.com/YSGStudyHards/DotNetGuide1.GitHubCopilotGitHubCopilot是一款AI編碼助手，可幫助你更快、更省力地編寫程式碼，從而將更多精力集中在問題解決和協作上。 Git
教你使用 iOS 17.4「失竊裝置保護」新進階功能
Mar 10, 2024 pm 04:34 PM
Apple在周二推出了iOS17.4更新，為iPhone帶來了一系列新功能和修復。這次更新包含了全新的表情符號，同時歐盟用戶也能夠下載其他應用程式商店。此外，更新還加強了對iPhone安全性的控制，引入了更多的「失竊設備保護」設定選項，為用戶提供更多選擇和保障。 "iOS17.3首次引入了「失竊設備保護」功能，為用戶的敏感資料增加了額外的安全保障。當用戶不在家等熟悉地點時，該功能要求用戶首次輸入生物特徵信息，並在一小時後再次輸入資訊才能存取和更改某些數據，如修改AppleID密碼或關閉失竊設備保護功能
打開抖音相簿找不到手機裡的照片怎麼辦？抖音相簿不顯示照片的原因是什麼？
Mar 21, 2024 pm 05:20 PM
在數位時代，照片和影片成為了我們記錄生活、表達情感的重要方式。抖音作為國內領先的短視頻平台，讓用戶能夠輕鬆地透過短視頻的形式分享自己的生活。有些用戶在打開抖音相簿時卻發現找不到手機裡的照片，這無疑為他們的使用體驗帶來了一定的困擾。那麼，遇到這種情況我們該如何解決呢？又是什麼原因導致了這種情況的發生呢？本文將圍繞這兩個問題進行詳細探討。一、打開抖音相簿找不到手機裡的照片怎麼辦？當用戶在抖音相簿中找不到手機裡的照片時，可以嘗試以下幾種方法解決問題：檢查照片權限：請確保在手機設定中允許抖音應用程式存取相冊
AI程式設計師哪家強？探索Devin、通靈靈碼和SWE-agent的潛力
Apr 07, 2024 am 09:10 AM
2022年3月3日，距離世界首個AI程式設計師Devin誕生不足一個月，普林斯頓大學的NLP團隊開發了一個開源AI程式設計師SWE-agent。它利用GPT-4模型在GitHub儲存庫中自動解決問題。 SWE-agent在SWE-bench測試集上的表現與Devin相似，平均耗時93秒，解決了12.29%的問題。 SWE-agent透過與專用終端交互，可以開啟、搜尋文件內容，使用自動語法檢查、編輯特定行，以及編寫和執行測試。 （註：以上內容為原始內容微調，但保留了原文中的關鍵訊息，未超過指定字數限制。）SWE-A
