們都被移動的物體和不尋常的方向所吸引。動畫效果可用于改善用戶界面或吸引用戶注意項目的重要部分。

在這篇文章中，我將向您展示如何應用不同的轉換來改善您網站的可用性和設計。

CSS轉換

您可以使用CSS屬性以多種不同方式對網站元素進行轉換，從而為網站元素添加效果 transform。此屬性允許您 使用各種變換函數旋轉，縮放，移動和傾斜元素。您還可以在鼠標懸停或鼠標單擊時觸發這些轉換。我將在以后的文章中介紹三維變換。

讓我們看看每個轉換屬性函數。

規模

該 scale 函數允許您增加或減少元素的大小，即按元素縮放元素。

例如，因子 2 會將元素的大小轉換為其原始大小的2倍。同樣，因子 0.4 會將其大小轉換為原始大小的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作為參數傳遞給scale 函數，所以上面的代碼會將圖像的寬度和高度都增加到原始圖像的1.5倍 。請注意，該 transform 屬性具有供應商前綴 -webkit-， -moz- 并且 -o-。這些是為了獲得所有瀏覽器的最佳支持。

要使轉換平滑，請使用該 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);
}		

這種轉換特性將使轉換線性發生0.2秒。將鼠標懸停在下圖中可查看此轉換的實時演示。

更具體地說，您可以使用 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倍。嘗試將鼠標懸停在以下圖像上。

現在，考慮您希望將寬度增加到1.2倍并將高度同時降低到元素原始值的0.8倍的情況。為此，您必須為scale 以逗號分隔的函數提供兩個值 。第一個值將縮放其寬度，第二個值將縮放其高度。

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屬性，如 填充 和 字體大小。

回轉

這是該transform 物業的另一項功能 。使用此功能，您可以按任何方向旋轉元素，無論您想要哪個方向。正值將順時針旋轉元素，負值將逆時針旋轉。

讓我們嘗試將圖像旋轉一定角度，盡管您可以旋轉幾乎任何像 div，span，headings或paragraph這樣的東西。 您也可以嘗試旋轉整個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);
}

默認情況下，該 rotate 函數沿Z軸旋轉元素。可以專門旋轉沿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軸旋轉180度。第三個笑臉沿Z軸旋轉40度，這也是默認的旋轉軸。

您可以通過組合這些轉換來創建許多新組合。現在，讓我們轉到另一個轉換函數。

翻譯

您可以使用該translate 功能在水平，垂直或任何其他方向上移動元素 。它只會改變應用它的元素的位置，而不會中斷文檔的正常流動。

translateX 用于水平移動元素。給出正值將使其向右移動并向左移動負值。 translateY 將在垂直方向移動您的元素。同樣，正值會將其向下移動并向上移動負值。

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 函數將第一圖像向右移動40px， 使用該translateY 值向下移動第二圖像20px 。您也可以同時水平和垂直移動相同的元素。為此，您必須將兩個參數傳遞translate 給以逗號分隔的 函數。第一個值將水平移動元素，而第二個值將垂直移動元素。

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轉換元素的嵌套。

結論

如果適當應用，各種網站元素的位置和方向的微小動畫轉換可以為您的網站設計帶來生命。這只是關于不同類型轉換的介紹和基本用法的帖子。這些可用于創建非常驚人的效果和動畫，我將在以后的帖子中繼續介紹。

歡迎加評論區討論。整理不易，祝給我收藏關注的大佬發大財emmm。

SS Shapes允許我們通過定義文本內容可以流動的幾何形狀，圖像和漸變來制作有趣且獨特的布局。在本篇文章中將簡要介紹如何使用它們。

在引入，幾乎不可能設計出具有自由流動文本的雜志式布局。相反，網頁設計布局傳統上采用網格，方框和直線形狀。

CSS Shapes允許我們定義文本可以流動的幾何形狀。這些形狀可以是圓形，橢圓形，簡單或復雜多邊形，甚至是圖像和漸變。Shapes的一些實際設計應用可能是在圓形化身周圍顯示圓形文本，在全寬背景圖像的簡單部分上顯示文本，以及在文章中顯示文本中的文本流。

既然CSS Shapes已經在現代瀏覽器中獲得了廣泛的支持，那么值得一看的是它們提供的靈活性和功能，以確定它們在您的下一個設計項目中是否有意義。

注意：在撰寫本文時，支持Firefox，Chrome，Safari和Opera，以及iOS Safari和Chrome for Android等移動瀏覽器。形狀沒有IE支持，并且正在 Microsoft Edge。

首先看看CSS形狀

CSS Shapes的當前實現是，它主要圍繞屬性。shape-outside定義文本可以流動的形狀。

考慮到存在shape-outside屬性，您可能會假設存在一個對應的shape-inside屬性，該屬性將包含形狀中的文本。一個shape-inside屬性可能在未來成為現實，但目前它是在一個草案，而不是由任何瀏覽器來實現。

在本文中，我們將演示如何使用數據類型并使用形狀函數值設置它，以及使用半透明URL或漸變設置形狀。

基本形狀函數

我們可以通過將以下函數值應用于shape-outside屬性來定義CSS中的各種基本形狀：

· circle()

· ellipse()

· inset()

· polygon()

為了將shape-outside屬性應用于元素，元素必須浮動，并具有定義的高度和寬度。讓我們來看看四種基本形狀中的每一種，并演示如何使用它們。

圓

我們將從該circle()功能開始。想象一下這樣一種情況：我們有一個我們想要向左浮動的作者的圓形化身，我們希望作者的描述文本在它周圍流動。僅僅使用border-radius: 50%頭像元素就不足以使文本形成圓形; 文本仍會將頭像視為矩形元素。

通過圓形，我們可以演示文本如何圍繞圓圈流動。

我們首先要circle在常規上創建一個類div，并制作一些段落。（我使用Bob Ross引用為Lorem Ipsum文本。）

<div class="circle"></div>

<p>Example text...</p>

在我們的circle課堂上，我們留下浮動的元素，給它一個平等height和width，并設置shape-outside到circle()。

.circle {

float: left;

height: 200px;

width: 200px;

shape-outside: circle();

}

如果我們查看頁面，它將如下所示。

如您所見，文本圍繞圓形流動，但我們實際上看不到任何形狀。將鼠標懸停在開發人員工具中的元素上將向我們顯示正在設置的實際形狀。

此時，您可能會認為可以background為元素設置顏色或圖像，并且您將看到形狀。讓我們嘗試一下。

.circle {

float: left;

height: 200px;

width: 200px;

shape-outside: circle();

background: linear-gradient(to top right, #FDB171, #FD987D);

}

無奈的是，設置background于circle只是給我們一個矩形，我們一直在試圖避免的事情。

我們可以清楚地看到文本在它周圍流動，但元素本身沒有形狀。如果我們想要實際顯示我們的形狀函數，我們將不得不使用該屬性。clip-path取許多相同的值shape-outside，所以我們可以給它相同的circle()值。

.circle {

float: left;

height: 200px;

width: 200px;

shape-outside: circle();

clip-path: circle();

background: linear-gradient(to top right, #FDB171, #FD987D);

}

對于本文的其余部分，我將用它clip-path來幫助我們識別形狀。

該circle()函數采用半徑的可選參數。在我們的例子中，默認半徑（r）是50%，或100px。使用circle(50%)或circle(100px)將產生與我們已經完成的結果相同的結果。您可能會注意到文本正對著形狀。我們可以用屬性來余量添加到形狀，其可以在被設置px，em，%，和測量的任何其他標準的CSS單元。

.circle {

float: left;

height: 200px;

width: 200px;

shape-outside: circle(25%);

shape-margin: 1rem;

clip-path: circle(25%);

background: linear-gradient(to top right, #FDB171, #FD987D);

}

以下是應用25% circle()半徑的示例shape-margin。

除了半徑之外，形狀函數可以使用位置at。默認位置是圓的中心，因此circle()將明確地寫為circle(50% at 50% 50%)或circle(100px at 100px 100px)，其中兩個值分別是水平和垂直位置。

為了明確定位的工作原理，我們可以將水平位置值設置0為一個完美的半圓。

circle(50% at 0 50%);

該坐標定位系統稱為參考框。

稍后，我們將學習如何使用圖像而不是形狀或漸變。現在，我們將繼續進行下一個形狀函數。

橢圓

類似于circle()功能是ellipse()，它創建一個橢圓形。為了演示，我們可以創建一個ellipse元素和類。

<div class="ellipse"></div>
<p>Example text...</p>
.ellipse {
 float: left;
 shape-outside: ellipse();
 clip-path: ellipse();
 width: 150px;
 height: 300px;
 background: linear-gradient(to top right, #F17BB7, #AD84E3);
}

這一次，我們設置了一個不同的，height并width制作一個垂直拉長的橢圓形。

a ellipse()和a 之間的區別在于circle()橢圓具有兩個半徑 - r x和r y，或者X軸半徑和Y軸半徑。因此，上面的例子也可以寫成：

ellipse(75px 150px);

圓和橢圓的位置參數相同。半徑，除了作為測量單位，還包括的選項farthest-side和closest-side。

closest-side"參考盒" farthest-side是指從參考盒的中心到最近側的長度，相反，是指從參考盒的中心到最遠側的長度。這意味著如果未設置默認值以外的位置，則這兩個值無效。

下面是翻轉的差的示范closest-side和farthest-side上一個ellipse()與一個25%在X偏移和Y軸。

ellipse(farthest-side closest-side at 25% 25%)

ellipse(farthest-side closest-side at 25% 25%)

插頁（inset）

到目前為止，我們只處理圓形，但我們可以使用該inset()函數定義插入矩形。

<div class="inset"></div>
<p>Example text...</p>
.inset {
 float: left;
 shape-outside: inset(75px);
 clip-path: inset(75px);
 width: 300px;
 height: 300px;
 background: linear-gradient(#58C2ED, #1B85DC);
}

在這個例子中，我們將創建一個300pxby 300px矩形，并75px在所有方面插入它。這將使我們有一個150px由150px與75px它周圍的空間。

我們可以看到矩形是插入的，文本忽略了插入區域。

一個inset()形狀也可以border-radius使用round參數，文本將尊重圓角，例如這個示例的25px所有邊和75px圓角。

inset(25px round 75px)

喜歡padding或margin簡寫，插入值將接受top right bottom left順時針順序（inset(25px 25px 25px 25px)）的值，并且只使用單個值將使所有四個邊相同（inset(25px)）。

多邊形

形狀函數最有趣和最靈活的是polygon()，它可以采用一系列x和y點來制作任何復雜的形狀。數組中的每個項目代表x i y i，并且將被寫為polygon(x1 y1, x2 y2, x3 y3...)等等。

我們可以應用于多邊形的點集數量最少為3，這將創建一個三角形。

<div class="polygon"></div>
<p>Example text...</p>
.polygon {
 float: left;
 shape-outside: polygon(0 0, 0 300px, 200px 300px);
 clip-path: polygon(0 0, 0 300px, 200px 300px);
 height: 300px;
 width: 300px;
 background: linear-gradient(to top right, #86F7CC, #67D7F5);
}

在這個形狀中，第一個點是0 0，左上角最左邊的點div。第二點是0 300px，這是最左下角的點div。第三個也是最后一個點是200px 300pxX軸上的2/3并且仍然在底部。結果形狀如下所示：

polygon()形狀函數的一個有趣用法是文本內容可以在兩個或更多個形狀之間流動。由于polygon()形狀如此靈活和動態，這是制作真正獨特的雜志式布局的最大機會之一。在這個例子中，我們將在兩個多邊形形狀之間放置一些文本。

<div class="left"></div>

<div class="right"></div>

<p>Example text...</p>

.left {

float: left;

shape-outside: polygon(0 0, 0 300px, 200px 300px);

clip-path: polygon(0 0, 0 300px, 200px 300px);

background: linear-gradient(to top right, #67D7F5, #86F7CC);

height: 300px;

width: 300px;

}

.right {

float: right;

shape-outside: polygon(200px 300px, 300px 300px, 300px 0, 0 0);

clip-path: polygon(200px 300px, 300px 300px, 300px 0, 0 0);

background: linear-gradient(to bottom left, #67D7F5, #86F7CC);

height: 300px;

width: 300px;

}

顯然，嘗試手動創建自己的復雜形狀是非常困難的。幸運的是，您可以使用多種工具來創建多邊形。Firefox有一個用于形狀的內置編輯器，您可以通過單擊檢查器中的多邊形形狀來使用它。

目前，Chrome還有一些可以使用的擴展程序，例如。

多邊形可用于剪切圖像或其他元素周圍的形狀。在另一個示例中，我們可以通過圍繞大字母繪制多邊形來創建首字下沉。

<div class="letter">R</div>

<p>Example text...</p>

.letter {

float: left;

font-size: 400px;

font-family: Georgia;

line-height: .8;

margin-top: 20px;

margin-right: 20px;

shape-outside: polygon(5px 14px, 233px 20px, 246px 133px, 189px 167px, 308px 304px, 0px 306px) content-box;

clip-path: polygon(5px 14px, 233px 20px, 246px 133px, 189px 167px, 308px 304px, 0px 306px);

}

URLs

CSS Shapes的一個令人興奮的功能是你不必總是用形狀函數明確定義形狀; 您還可以使用半透明圖像的URL來定義形狀，文本將自動圍繞它流動。

重要的是要注意所使用的圖像必須與兼容，否則您將收到如下所示的錯誤。

Access to image at 'file:///users/tania/star.png' from origin 'null'

has been blocked by CORS policy: The response is invalid.

從同一服務器在服務器上提供映像將確保您不會收到該錯誤。

與其他示例不同，我們將使用img標記而不是div。這次CSS很簡單 - 只需將其url()放入shape-outside屬性中，就像使用它一樣background-image。

<img src="./star.png" class="star">

<p>Example text...</p>

.star {

float: left;

height: 350px;

width: 350px;

shape-outside: url('./star.png')

}

由于我使用的圖像是具有透明背景的星形，因此文本知道哪些區域是透明的，哪些區域是不透明的，并且相應地對齊。

漸變

最后，漸變也可以用作形狀。漸變與圖像相同，就像我們上面使用的圖像示例一樣，文本將知道在透明部分周圍流動。

我們將使用一個帶漸變的新屬性 - 。的shape-image-threshold限定形狀的α信道的閾值，或什么百分比的圖像可以是透明的對不透明的。

我要做一個漸變的例子，是一個顏色和透明的50％/ 50％分割，并設置shape-image-threshold的.5，這意味著超過50％不透明應考慮部分圖像的所有像素。

<div class="gradient"></div>
<p>Example text...</p>
.gradient {
 float: left;
 height: 300px;
 width: 100%;
 background: linear-gradient(to bottom right, #86F7CC, transparent);
 shape-outside: linear-gradient(to bottom right, #86F7CC, transparent);
 shape-image-threshold: .5;
}

我們可以看到梯度在不透明和透明的中心對角線完美分割。

結論

在這篇文章中，我們了解到shape-outside，shape-margin和shape-image-threshold，CSS形狀的三個屬性。我們還學習了如何使用函數值創建圓形，橢圓形，插入矩形和文本可以流動的復雜多邊形，并演示了形狀如何檢測圖像和漸變的透明部分。

您可以在以下http://www.ikinsoft.com/demo/cssshapes/index.html找到本文的所有示例。