們都被移動的物體和不尋常的方向所吸引。動畫效果可用于改善用戶界面或吸引用戶注意項目的重要部分。
在這篇文章中,我將向您展示如何應(yīng)用不同的轉(zhuǎn)換來改善您網(wǎng)站的可用性和設(shè)計。
您可以使用CSS屬性以多種不同方式對網(wǎng)站元素進(jìn)行轉(zhuǎn)換,從而為網(wǎng)站元素添加效果 transform。此屬性允許您 使用各種變換函數(shù)旋轉(zhuǎn),縮放,移動和傾斜元素。您還可以在鼠標(biāo)懸停或鼠標(biāo)單擊時觸發(fā)這些轉(zhuǎn)換。我將在以后的文章中介紹三維變換。
讓我們看看每個轉(zhuǎn)換屬性函數(shù)。
規(guī)模
該 scale 函數(shù)允許您增加或減少元素的大小,即按元素縮放元素。
例如,因子 2 會將元素的大小轉(zhuǎn)換為其原始大小的2倍。同樣,因子 0.4 會將其大小轉(zhuǎn)換為原始大小的0.4倍。
我們來拍攝尺寸為200 * 200的圖像。
HTML
<img src = “pic.jpg” class = “element” width = “200” height = “200” >
為圖像分配了一個名為“element”的類。
為了使圖像大1.5倍,我們將使用 屬性的 scale 功能 transform。
CSS
.element:hover { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); }
因為我們將1.5作為參數(shù)傳遞給scale 函數(shù),所以上面的代碼會將圖像的寬度和高度都增加到原始圖像的1.5倍 。請注意,該 transform 屬性具有供應(yīng)商前綴 -webkit-, -moz- 并且 -o-。這些是為了獲得所有瀏覽器的最佳支持。
要使轉(zhuǎn)換平滑,請使用該 transition 屬性。
CSS
.element{ -webkit-transition: transform .2s linear; -moz-transition: transform .2s linear; -o-transition: transform .2s linear; transition: transform .2s linear; } .element:hover { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); }
這種轉(zhuǎn)換特性將使轉(zhuǎn)換線性發(fā)生0.2秒。將鼠標(biāo)懸停在下圖中可查看此轉(zhuǎn)換的實時演示。
更具體地說,您可以使用 scaleX 和 scaleY 值分別縮放元素的寬度和高度。
HTML
<img src = “pic.jpg” class = “scale1” width = “200” height = “200” > <img src = “pic.jpg” class = “scale2” width = “200” height = “200” >
CSS
.scale1{ -webkit-transition: transform .2s linear; -moz-transition: transform .2s linear; -o-transition: transform .2s linear; transition: transform .2s linear; } .scale1:hover { -webkit-transform: scaleX(1.2); -moz-transform: scaleX(1.2); -o-transform: scaleX(1.2); transform: scaleX(1.2); } .scale2{ -webkit-transition: transform .2s linear; -moz-transition: transform .2s linear; -o-transition: transform .2s linear; transition: transform .2s linear; } .scale2:hover { -webkit-transform: scaleY(.8); -moz-transform: scaleY(.8); -o-transform: scaleY(.8); transform: scaleY(.8); }
在懸停在各個圖像上時,具有類'scale1'的第一圖像的寬度將增加到其原始寬度的1.2倍,并且具有類'scale2'的第二圖像的高度將減小到其原始高度的0.8倍。嘗試將鼠標(biāo)懸停在以下圖像上。
現(xiàn)在,考慮您希望將寬度增加到1.2倍并將高度同時降低到元素原始值的0.8倍的情況。為此,您必須為scale 以逗號分隔的函數(shù)提供兩個值 。第一個值將縮放其寬度,第二個值將縮放其高度。
CSS
.element{ -webkit-transition: transform .2s linear; -moz-transition: transform .2s linear; -o-transition: transform .2s linear; transition: transform .2s linear; } .element:hover { -webkit-transform: scale(1.2, .8); -moz-transform: scale(1.2, .8); -o-transform: scale(1.2, .8); transform: scale(1.2, .8); }
您還可以縮放其他CSS屬性,如 填充 和 字體大小。
回轉(zhuǎn)
這是該transform 物業(yè)的另一項功能 。使用此功能,您可以按任何方向旋轉(zhuǎn)元素,無論您想要哪個方向。正值將順時針旋轉(zhuǎn)元素,負(fù)值將逆時針旋轉(zhuǎn)。
讓我們嘗試將圖像旋轉(zhuǎn)一定角度,盡管您可以旋轉(zhuǎn)幾乎任何像 div,span,headings或paragraph這樣的東西。 您也可以嘗試旋轉(zhuǎn)整個html體。聽起來怪怪的?試一試吧。
HTML
<img src = “pic.jpg” class = “rotate1” > <img src = “pic.jpg” class = “rotate2” >
CSS
/* first image */ .rotate1{ -webkit-transition: transform .2s linear; -moz-transition: transform .2s linear; -o-transition: transform .2s linear; transition: transform .2s linear; } .rotate1:hover { -webkit-transform: rotate(40deg); -moz-transform: rotate(40deg); -o-transform: rotate(40deg); transform: rotate(40deg); } /* second image */ .rotate2{ -webkit-transition: transform .2s linear; -moz-transition: transform .2s linear; -o-transition: transform .2s linear; transition: transform .2s linear; } .rotate2:hover { -webkit-transform: rotate(-40deg); -moz-transform: rotate(-40deg); -o-transform: rotate(-40deg); transform: rotate(-40deg); }
默認(rèn)情況下,該 rotate 函數(shù)沿Z軸旋轉(zhuǎn)元素。可以專門旋轉(zhuǎn)沿X,Y的元素,并使用Z軸的功能 rotateX, rotateY 和 rotateZ 分別。我們來看看如何。
HTML
<img src = “pic.jpg” class = “rotate1” > <img src = “pic.jpg” class = “rotate2” > <img src = “pic.jpg” class = “rotate3” >
CSS
/* first image */ .rotate1{ -webkit-transition: transform 1s linear; -moz-transition: transform 1s linear; -o-transition: transform 1s linear; transition: transform 1s linear; } .rotate1:hover { -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -o-transform: rotateX(180deg); transform: rotateX(180deg); } /* second image */ .rotate2{ -webkit-transition: transform 1s linear; -moz-transition: transform 1s linear; -o-transition: transform 1s linear; transition: transform 1s linear; } .rotate2:hover { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } /* third image */ .rotate3{ -webkit-transition: transform .2s linear; -moz-transition: transform .2s linear; -o-transition: transform .2s linear; transition: transform .2s linear; } .rotate3:hover { -webkit-transform: rotateZ(40deg); -moz-transform: rotateZ(40deg); -o-transform: rotateZ(40deg); transform: rotateZ(40deg); }
第一和第二表情分別沿X和Y軸旋轉(zhuǎn)180度。第三個笑臉沿Z軸旋轉(zhuǎn)40度,這也是默認(rèn)的旋轉(zhuǎn)軸。
您可以通過組合這些轉(zhuǎn)換來創(chuàng)建許多新組合。現(xiàn)在,讓我們轉(zhuǎn)到另一個轉(zhuǎn)換函數(shù)。
翻譯
您可以使用該translate 功能在水平,垂直或任何其他方向上移動元素 。它只會改變應(yīng)用它的元素的位置,而不會中斷文檔的正常流動。
translateX 用于水平移動元素。給出正值將使其向右移動并向左移動負(fù)值。 translateY 將在垂直方向移動您的元素。同樣,正值會將其向下移動并向上移動負(fù)值。
HTML
<img src = “pic.jpg” class = “translate1” > <img src = “pic.jpg” class = “translate2” >
CSS
/* first image */ .translate1{ -webkit-transition: transform .2s linear; -moz-transition: transform .2s linear; -o-transition: transform .2s linear; transition: transform .2s linear; } .translate1:hover { -webkit-transform: translateX(40px); -moz-transform: translateX(40px); -o-transform: translateX(40px); transform: translateX(40px); } /* second image */ .rotate2{ -webkit-transition: transform .2s linear; -moz-transition: transform .2s linear; -o-transition: transform .2s linear; transition: transform .2s linear; } .rotate2:hover { -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); }
使用該translateX 函數(shù)將第一圖像向右移動40px, 使用該translateY 值向下移動第二圖像20px 。您也可以同時水平和垂直移動相同的元素。為此,您必須將兩個參數(shù)傳遞translate 給以逗號分隔的 函數(shù)。第一個值將水平移動元素,而第二個值將垂直移動元素。
HTML
<img src = “pic.jpg” class = “translate1” >
CSS
.translate1{ -webkit-transition: transform .2s linear; -moz-transition: transform .2s linear; -o-transition: transform .2s linear; transition: transform .2s linear; } .translate1:hover { -webkit-transform: translate(40px,20px); -moz-transform: translate(40px,20px); -o-transform: translate(40px,20px); transform: translate(40px,20px); }
上圖是跟隨懸停的路徑,其中最終位置向右40px,低于初始位置20px。
瀏覽器支持
除google之外的所有瀏覽器都支持此屬性 。此外, IE 不支持 transform-style:preserve-3d 屬性,因此阻止了3D轉(zhuǎn)換元素的嵌套。
結(jié)論
如果適當(dāng)應(yīng)用,各種網(wǎng)站元素的位置和方向的微小動畫轉(zhuǎn)換可以為您的網(wǎng)站設(shè)計帶來生命。這只是關(guān)于不同類型轉(zhuǎn)換的介紹和基本用法的帖子。這些可用于創(chuàng)建非常驚人的效果和動畫,我將在以后的帖子中繼續(xù)介紹。
歡迎加評論區(qū)討論。整理不易,祝給我收藏關(guān)注的大佬發(fā)大財emmm。
markdown中寫下你的文章,并使用Python將它們轉(zhuǎn)換成HTML-作者Florian Dahlitz,于2020年5月18日(15分鐘)
介紹
幾個月前,我想開通自己的博客,而不是使用像Medium這樣的網(wǎng)站。這是一個非常基礎(chǔ)的博客,所有的文章都是HTML形式的。然而,有一天,我突然產(chǎn)生了自己編寫Markdown到HTML生成器的想法,最終這將允許我用markdown來編寫文章。此外,為它添加諸如估計閱讀時間之類的擴(kuò)展特性會更容易。長話短說,我實現(xiàn)了自己的markdown到HTML生成器,我真的很喜歡它!
在本系列文章中,我想向您展示如何構(gòu)建自己的markdown到HTML生成器。該系列由三部分組成:
第一部分(本文)介紹了整個管線的實現(xiàn)。
第二部分通過一個模塊擴(kuò)展了實現(xiàn)的管線,該模塊用于計算給定文章的預(yù)計閱讀時間。
第三部分演示如何使用管線生成自己的RSS摘要。
這三部分中使用的代碼都可以在GitHub上找到。
備注:我的文章中markdown到HTML生成器的想法基于Anthony Shaw文章中的實現(xiàn)。
項目構(gòu)建
為了遵循本文的內(nèi)容,您需要安裝幾個軟件包。我們把它們放進(jìn)requirements.txt文件。
Markdown是一個包,它允許您將markdown代碼轉(zhuǎn)換為HTML。之后我們用Flask產(chǎn)生靜態(tài)文件。
但在安裝之前,請創(chuàng)建一個虛擬環(huán)境,以避免Python安裝出現(xiàn)問題:
激活后,您可以使用pip安裝requirements.txt中的依賴。
很好!讓我們創(chuàng)建幾個目錄來更好地組織代碼。首先,我們創(chuàng)建一個app目錄。此目錄包含我們提供博客服務(wù)的Flask應(yīng)用程序。所有后續(xù)目錄都將在app目錄內(nèi)創(chuàng)建。其次,我們創(chuàng)建一個名為posts的目錄。此目錄包含要轉(zhuǎn)換為HTML文件的markdown文件。接下來,我們創(chuàng)建一個templates目錄,其中包含稍后使用Flask展示的模板。在templates目錄中,我們再創(chuàng)建兩個目錄:
posts包含生成的HTML文件,這些文件與應(yīng)用程序根目錄中posts目錄中的文件相對應(yīng)。
shared包含在多個文件中使用的HTML文件。
此外,我們還創(chuàng)建了一個名為services的目錄。該目錄將包含我們在Flask應(yīng)用程序中使用的模塊,或者為它生成某些東西。最后,創(chuàng)建一個名為static的目錄帶有兩個子目錄images和css。自定義CSS文件和文章的縮略圖將存儲在此處。
您的最終項目結(jié)構(gòu)應(yīng)如下所示:
令人驚嘆!我們完成了一般的項目設(shè)置。我們來看看Flask的設(shè)置。
Flask設(shè)置
路由
我們在上一節(jié)安裝了Flask。但是,我們?nèi)匀恍枰粋€Python文件來定義用戶可以訪問的端點。在app目錄中創(chuàng)建main.py并將以下內(nèi)容復(fù)制到其中。
該文件定義了一個具有兩個端點的基礎(chǔ)版Flask應(yīng)用程序。用戶可以使用/route訪問第一個端點返回索引頁,其中列出了所有文章。
第二個端點是更通用的端點。它接受post的名稱并返回相應(yīng)的HTML文件。
接下來,我們通過向app目錄中添加一個__init__.py,將其轉(zhuǎn)換為一個Python包。此文件為空。如果您使用UNIX計算機(jī),則可以從項目的根目錄運行以下命令:
模板
現(xiàn)在,我們創(chuàng)建兩個模板文件index.html以及l(fā)ayout.html,都存儲在templates/shared目錄中。這個layout.html模板將用于單個博客條目,而index.html模板用于生成索引頁,從中我們可以訪問每個帖子。讓我們從index.html模板開始。
它是一個基本的HTML文件,其中有兩個元標(biāo)記、一個標(biāo)題和兩個樣式表。注意,我們使用一個遠(yuǎn)程樣式表和一個本地樣式表。遠(yuǎn)程樣式表用于啟用Bootstrap[1]類。第二個是自定義樣式。我們晚點再定義它們。
HTML文件的主體包含一個容器,其中包含Jinja2[2]邏輯,用于為每個post生成Bootstrap卡片[3]。您是否注意到我們不直接基于變量名訪問這些值,而是需要將[0]添加到其中?這是因為文章中解析的元數(shù)據(jù)是列表。實際上,每個元數(shù)據(jù)元素都是由單一元素組成的列表。我們稍后再看。到目前為止,還不錯。讓我們看看layout.html模板。
如你所見,它比前一個短一點,簡單一點。文件頭與index.html文件很相似,除了我們有不同的標(biāo)題。當(dāng)然,我們可以共用一個模板,但是我不想讓事情變得更復(fù)雜。
body中的容器僅定義一個h1標(biāo)記。然后,我們提供給模板的內(nèi)容被插入并呈現(xiàn)。
樣式
正如上一節(jié)所承諾的,我們將查看自定義CSS文件style.css. 我們在static/css中找到該文件,并根據(jù)需要自定義頁面。下面是我們將用于基礎(chǔ)示例的內(nèi)容:
我不喜歡Bootstrap中blockquotes的默認(rèn)外觀,所以我們在左側(cè)添加了一點間距和邊框。此外,blockquote段落底部的頁邊空白將被刪除。不刪除的話看起來很不自然。
最后但并非最不重要的是,左右兩邊的填充被刪除。由于兩邊都有額外的填充,縮略圖沒有正確對齊,所以在這里刪除它們。
到現(xiàn)在為止,一直都還不錯。我們完成了關(guān)于Flask的所有工作。讓我們開始寫一些帖子吧!
寫文章
正如標(biāo)題所承諾的,你可以用markdown寫文章-是的!在寫文章的時候,除了保證正確的markdown格式外,沒有其他需要注意的事情。
在完成本文之后,我們需要在文章中添加一些元數(shù)據(jù)。此元數(shù)據(jù)添加在文章之前,并由三個破折號分隔開來---。下面是一個示例文章(post1.md)的摘錄:
注意:您可以在GitHub庫的app/posts/post1.md中找到完整的示例文章。
在我們的例子中,元數(shù)據(jù)由標(biāo)題、副標(biāo)題、類別、發(fā)布日期和index.html中卡片對應(yīng)縮略圖的路徑組成.
我們在HTML文件中使用了元數(shù)據(jù),你還記得嗎?元數(shù)據(jù)規(guī)范必須是有效的YAML。示例形式是鍵后面跟著一個冒號和值。最后,冒號后面的值是列表中的第一個也是唯一的元素。這就是我們通過模板中的索引運算符訪問這些值的原因。
假設(shè)我們寫完了文章。在我們可以開始轉(zhuǎn)換之前,還有一件事要做:我們需要為我們的帖子生成縮略圖!為了讓事情更簡單,只需從你的電腦或網(wǎng)絡(luò)上隨機(jī)選取一張圖片,命名它為placeholder.jpg并把它放到static/images目錄中。GitHub存儲庫中兩篇文章的元數(shù)據(jù)包含一個代表圖像的鍵值對,值是placeholder.jpg。
注意:在GitHub存儲庫中,您可以找到我提到的兩篇示例文章。
markdown到HTML轉(zhuǎn)換器
最后,我們可以開始實現(xiàn)markdown to HTML轉(zhuǎn)換器。因此,我們使用我們在開始時安裝的第三方包Markdown。我們先創(chuàng)建一個新模塊,轉(zhuǎn)換服務(wù)將在其中運行。因此,我們在service目錄中創(chuàng)建了converter.py。我們一步一步看完整個腳本。您可以在GitHub存儲庫中一次查看整個腳本。
首先,我們導(dǎo)入所需的所有內(nèi)容并創(chuàng)建幾個常量:
ROOT指向我們項目的根。因此,它是包含app的目錄。
POSTS_DIR是以markdown編寫的文章的路徑。
TEMPLATE_DIR分別指向?qū)?yīng)的templates目錄。
BLOG_TEMPLATE_文件存儲layout.html的路徑。
INDEX_TEMPLATE_FILE是index.html
BASE_URL是我們項目的默認(rèn)地址,例如。https://florian-dahlitz.de.默認(rèn)值(如果不是通過環(huán)境變量DOMAIN提供的話)是http://0.0.0.0:5000。
接下來,我們創(chuàng)建一個名為generate_entries的新函數(shù)。這是我們定義的唯一一個轉(zhuǎn)換文章的函數(shù)。
在函數(shù)中,我們首先獲取POSTS_DIR目錄中所有markdown文件的路徑。pathlib的awesome glob函數(shù)幫助我們實現(xiàn)它。
此外,我們定義了Markdown包需要使用的擴(kuò)展。默認(rèn)情況下,本文中使用的所有擴(kuò)展都隨它的安裝一起提供。
注意:您可以在文檔[4]中找到有關(guān)擴(kuò)展的更多信息。
此外,我們實例化了一個新的文件加載程序,并創(chuàng)建了一個在轉(zhuǎn)換項目時使用的環(huán)境。隨后,將創(chuàng)建一個名為all_posts的空列表。此列表將包含我們處理后的所有帖子。現(xiàn)在,我們進(jìn)入for循環(huán)并遍歷POSTS_DIR中找到的所有文章。
我們啟動for循環(huán),并打印當(dāng)前正在處理的post的路徑。如果有什么東西出問題了,這尤其有用。然后我們就知道,哪個文章的轉(zhuǎn)換失敗了。
接下來,我們在默認(rèn)url之后增加一部分。假設(shè)我們有一篇標(biāo)題為“面向初學(xué)者的Python”的文章。我們將文章存儲在一個名為python-for-beginners.md,的文件中,因此生成的url將是http://0.0.0.0:5000/posts/python-for-beginners。
變量url_html存儲的字符串與url相同,只是我們在末尾添加了.html。我們使用此變量定義另一個稱為target_file.的變量。變量指向存儲相應(yīng)HTML文件的位置。
最后,我們定義了一個變量md,它表示markdown.Markdown的實例,用于將markdown代碼轉(zhuǎn)換為HTML。您可能會問自己,為什么我們沒有在for循環(huán)之前實例化這個實例,而是在內(nèi)部實例化。當(dāng)然,對于我們這里的小例子來說,這沒有什么區(qū)別(只是執(zhí)行時間稍微短一點)。但是,如果使用諸如腳注之類的擴(kuò)展來使用腳注,則需要為每個帖子實例化一個新實例,因為腳注添加后就不會從此實例中刪除。因此,如果您的第一篇文章使用了一些腳注,那么即使您沒有明確定義它們,所有其他文章也將具有相同的腳注。
讓我們轉(zhuǎn)到for循環(huán)中的第一個with代碼塊。
實際上,with代碼塊打開當(dāng)前post并將其內(nèi)容讀入變量content。之后調(diào)用_md.convert將以markdown方式寫入的內(nèi)容轉(zhuǎn)換為HTML。隨后,env環(huán)境根據(jù)提供的模板BLOG_TEMPLATE_FILE(即layout.html如果你還記得的話)渲染生成的HTML。
第二個with 代碼塊用于將第一個with 代碼塊中創(chuàng)建的文檔寫入目標(biāo)文件。
以下三行代碼從元數(shù)據(jù)中獲取發(fā)布日期(被發(fā)布的日期),將其轉(zhuǎn)換為正確的格式(RFC 2822),并將其分配回文章的元數(shù)據(jù)。此外,生成的post_dict被添加到all_posts列表中。
我們現(xiàn)在出了for循環(huán),因此,我們遍歷了posts目錄中找到的所有posts并對其進(jìn)行了處理。讓我們看看generate_entries函數(shù)中剩下的三行代碼。
我們按日期倒序?qū)ξ恼逻M(jìn)行排序,所以首先顯示最新的文章。隨后,我們將文章寫到模板目錄一個新創(chuàng)建的index.html文件中。別把index.html錯認(rèn)為templates/shared目錄中的那個。templates/shared目錄中的是模板,這個是我們要使用Flask服務(wù)的生成的。
最后我們在函數(shù)generate_entries之后添加以下if語句。
這意味著如果我們通過命令行執(zhí)行文件,它將調(diào)用generate_entries函數(shù)。
太棒了,我們完成了converter.py腳本!讓我們從項目的根目錄運行以下命令來嘗試:
您應(yīng)該看到一些正在轉(zhuǎn)換的文件的路徑。假設(shè)您編寫了兩篇文章或使用了GitHub存儲庫中的兩篇文章,那么您應(yīng)該在templates目錄中找到三個新創(chuàng)建的文件。首先是index.html,它直接位于templates目錄中,其次是templates/posts目錄中的兩個HTML文件,它們對應(yīng)于markdown文件。
最后啟動Flask應(yīng)用程序并轉(zhuǎn)到http://0.0.0.0:5000。
總結(jié)
太棒了,你完成了這個系列的第一部分!在本文中,您已經(jīng)學(xué)習(xí)了如何利用Markdown包創(chuàng)建自己的Markdown to HTML生成器。您實現(xiàn)了整個管線,它是高度可擴(kuò)展的,您將在接下來的文章中看到這一點。
希望你喜歡這篇文章。一定要和你的朋友和同事分享。如果你還沒有,考慮在Twitter上關(guān)注我@DahlitzF或者訂閱我的通知,這樣你就不會錯過任何即將發(fā)表的文章。保持好奇心,不斷編碼!
參考文獻(xiàn)
Bootstrap (http://getbootstrap.com/)
Primer on Jinja Templating (https://realpython.com/primer-on-jinja-templating/)
Bootstrap Card (https://getbootstrap.com/docs/4.4/components/card/)
Python-Markdown Extensions (https://python-markdown.github.io/extensions/)
Tweet
英文原文:https://florian-dahlitz.de/blog/build-a-markdown-to-html-conversion-pipeline-using-python
譯者:阿布銩
HTML5和CSS3的世界里,2D和3D變換為網(wǎng)頁設(shè)計帶來了革命性的變化。通過簡單的CSS屬性,我們可以實現(xiàn)元素的平移、旋轉(zhuǎn)、縮放和傾斜等效果,從而創(chuàng)造出更加動態(tài)和交互性的用戶體驗。在本文中,我們將探索2D和3D變換的基本概念,并通過一些實例來演示它們的應(yīng)用。
2D變換是指在平面內(nèi)對元素進(jìn)行操作,包括平移(translate)、旋轉(zhuǎn)(rotate)、縮放(scale)和傾斜(skew)。以下是一些基本的2D變換例子:
.translate-example {
transform: translate(50px, 100px);
}
這個例子中,元素將沿X軸移動50像素,沿Y軸移動100像素。
.rotate-example {
transform: rotate(45deg);
}
在這個例子中,元素將圍繞其中心點旋轉(zhuǎn)45度。
.scale-example {
transform: scale(2, 3);
}
此處,元素的寬度放大到原來的2倍,高度放大到原來的3倍。
.skew-example {
transform: skew(30deg, 20deg);
}
這個例子將使元素沿X軸傾斜30度,沿Y軸傾斜20度。
3D變換引入了新的維度,即Z軸,為元素添加了深度感。3D變換包括3D平移(translate3d)、3D旋轉(zhuǎn)(rotateX/rotateY/rotateZ)、3D縮放(scale3d)等。
.translate3d-example {
transform: translate3d(50px, 100px, 200px);
}
在這個例子中,元素沿X軸移動50像素,沿Y軸移動100像素,同時沿Z軸移動200像素,產(chǎn)生一種深入屏幕的效果。
.rotate3d-example {
transform: rotateX(45deg);
}
這里,元素將圍繞X軸旋轉(zhuǎn)45度,創(chuàng)建出一個“翻頁”的效果。
.scale3d-example {
transform: scale3d(2, 2, 2);
}
此例中,元素在三個維度上均放大兩倍。
讓我們通過幾個具體的例子來看看2D和3D變換在實際應(yīng)用中的效果。
<div class="card">
<div class="card-front">前面</div>
<div class="card-back">背面</div>
</div>
.card {
width: 200px;
height: 300px;
position: relative;
}
.card-front, .card-back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
transition: transform 0.6s;
}
.card-front {
background-color: #fff;
z-index: 2;
}
.card-back {
background-color: #f1f1f1;
transform: rotateY(180deg);
}
.card:hover .card-front {
transform: rotateY(-180deg);
}
.card:hover .card-back {
transform: rotateY(0deg);
}
當(dāng)鼠標(biāo)懸停在卡片上時,前面的卡片會翻轉(zhuǎn)到背面。
<div class="cube">
<div class="face front">前</div>
<div class="face back">后</div>
<div class="face left">左</div>
<div class="face right">右</div>
<div class="face top">上</div>
<div class="face bottom">下</div>
</div>
.cube {
position: relative;
width: 200px;
transform-style: preserve-3d;
animation: spin 5s infinite linear;
}
.face {
position: absolute;
width: 200px;
height: 200px;
background-color: rgba(255, 255, 255, 0.7);
border: 1px solid #ccc;
}
.front { transform: translateZ(100px); }
.back { transform: translateZ(-100px) rotateY(180deg); }
.left { transform: rotateY(-90deg) translateZ(100px); }
.right { transform: rotateY(90deg) translateZ(100px); }
.top { transform: rotateX(90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }
@keyframes spin {
from { transform: rotateY(0deg); }
to { transform: rotateY(360deg); }
}
這個立方體會在頁面上無限旋轉(zhuǎn),展示了一個基本的3D效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2D & 3D Transform Example</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
}
.btn-2d {
padding: 10px 20px;
margin: 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
outline: none;
transition: transform 0.3s ease;
}
.btn-2d:hover {
transform: rotateZ(360deg);
}
.card-3d {
width: 200px;
height: 300px;
perspective: 1000px;
cursor: pointer;
margin: 20px;
}
.card-inner {
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
position: relative;
}
.card-3d:hover .card-inner {
transform: rotateY(180deg);
}
.card-face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
color: white;
font-size: 24px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.card-front {
background: #007bff;
}
.card-back {
background: #ff5722;
transform: rotateY(180deg);
}
.scene {
width: 200px;
height: 200px;
perspective: 600px;
margin: 20px;
}
.cube {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(-45deg);
animation: rotateCube 5s infinite linear;
}
.face {
position: absolute;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid #ccc;
}
.front { transform: translateZ(100px); }
.back { transform: rotateY(180deg) translateZ(100px); }
.right { transform: rotateY(90deg) translateZ(100px); }
.left { transform: rotateY(-90deg) translateZ(100px); }
.top { transform: rotateX(90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }
@keyframes rotateCube {
0% { transform: rotateX(-30deg) rotateY(-45deg); }
100% { transform: rotateX(-30deg) rotateY(315deg); }
}
</style>
</head>
<body>
<button class="btn-2d">Click Me!</button>
<div class="card-3d">
<div class="card-inner">
<div class="card-face card-front">
Front Side
</div>
<div class="card-face card-back">
Back Side
</div>
</div>
</div>
<div class="scene">
<div class="cube">
<div class="face front"></div>
<div class="face back"></div>
<div class="face right"></div>
<div class="face left"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>
</div>
</body>
</html>
通過本文的介紹,我們了解了2D和3D變換的基本概念以及它們在實際應(yīng)用中的一些例子。隨著技術(shù)的進(jìn)步,現(xiàn)代瀏覽器對這些效果的支持越來越好,而我們作為開發(fā)者,可以利用這些工具創(chuàng)造出更加豐富和生動的網(wǎng)頁體驗。記得在使用這些技術(shù)時保持平衡,確保它們增強(qiáng)而不是干擾用戶的體驗。
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。