CSS3旋轉縮放移動傾斜等效果——transform

hzc 發布于2019-04-23 11:56 / 663人閱讀

摘要：可以將元素旋轉，縮放，移動，傾斜等。通過設置軸的值來定義縮放轉換。旋轉，在參數中規定角度如。如下勻速時間效果如下下面主要介紹屬性值的效果，所以都配合來使用吧，方便看看前后變化的不同。

1.transform瀏覽器支持情況

也就是說目前不考慮老瀏覽器的話是不用加前綴的，感謝菜鳥教程：https://www.runoob.com/cssref/css3-pr-transform.html

transform默認值none;就是不轉換，不繼承，js中對其更改示例：object.style.transform="rotate(7deg)"

2.transform能干啥？

transform屬性讓元素進行2D或3D轉換。可以將元素：旋轉，縮放，移動，傾斜等。

3.transform怎么用？?

transform: none|transform-functions;

none是默認的，就是不進行轉換，好理解。transform-functions有哪些？如下表：

transform-functions的值	描述	示例
matrix(n,n,n,n,n,n)	定義 2D 轉換，使用六個值的矩陣。	?
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定義 3D 轉換，使用 16 個值的 4x4 矩陣。	?
translate(x,y)	位移，將元素沿著x軸，y軸移動指定的距離。	transform:translate(100px,20px);
translate3d(x,y,z)	定義 3D 轉換。	?
translateX(x)	定義轉換，只是用 X 軸的值。	?
translateY(y)	定義轉換，只是用 Y 軸的值。	?
translateZ(z)	定義 3D 轉換，只是用 Z 軸的值。	?
scale(x,y)	縮放,將元素沿著x軸，y軸縮放一定的倍數	?
scale3d(x,y,z)	定義 3D 縮放轉換。	?
scaleX(x)	通過設置 X 軸的值來定義縮放轉換。	?
scaleY(y)	通過設置 Y 軸的值來定義縮放轉換。	?
scaleZ(z)	通過設置 Z 軸的值來定義 3D 縮放轉換。	?
rotate(angle)	2D 旋轉，在參數中規定角度（如：30deg）。	transform: rotate(360deg);
rotate3d(x,y,z,angle)	定義 3D 旋轉。	?
rotateX(angle)	定義沿著 X 軸的 3D 旋轉。	?
rotateY(angle)	定義沿著 Y 軸的 3D 旋轉。	?
rotateZ(angle)	定義沿著 Z 軸的 3D 旋轉。	?
skew(x-angle,y-angle)	定義沿著 X 和 Y 軸的 2D 傾斜。	transform: rotate(30deg,60deg);
skewX(angle)	定義沿著 X 軸的 2D 傾斜。	?
skewY(angle)	定義沿著 Y 軸的 2D 傾斜。	?
perspective(n)	為 3D 轉換元素定義透視視圖。	測試

?4.詳細介紹下transform屬性怎么用

頁面有個幾個div，寬200px，高100px，有的為其加上transform:rotate(30deg)，效果如下（1236是沒有定義transform的）：

注意，這是打開頁面就會變形旋轉好的，不會有動畫！！！

使用transition過渡，才會產生動畫。如下：

1             .box5 {
2                 /* 勻速 時間2s */
3                 transition: linear 2s;
4             }
5             .box5:hover{
6                 transform: rotate(360deg);
7             }

效果如下：

?下面主要介紹transform屬性值的效果，所以都配合transition來使用吧，方便看看前后變化的不同。

skewX(x) ，x是傾斜的度數，

 1         <style type="text/css">
 2             .box1 {
 3                 width: 200px; height: 100px; background-color: #FF9900;
 4                 transition: 0.5s;
 5             }
 6             .box1:hover {
 7                 transform: skewX(-45deg);
 8             }
 9         style>
10 ...
11         <div style="border: #000000 1px solid">
12             <div class="box1">看看我的變化div>
13         div>
14         我是下一行內容

?效果如下：

?skewY(y)，上面代碼skewX改為skewY，效果如下

skew就是skewX和skeY的合集，上面第7行transform: skewX(-45deg);改為transform: skew(-45deg,45deg);效果如下

在這里，我不得不承認，還是在大腦總難以圖像化：skew怎么去變形的過程。只有x軸上變動可以在腦中有個印象，只有Y軸變動，也可以有個動態的過程，都變動的話，嗯，腦子中形成不了那個印象。下面圖對讓變動和原圖對比，看看怎么變的，也不深究了。。。

再來看看縮放函數transform:scale(2); 放大兩倍（看到沒，放大了是視覺上的，并不擠占兄弟和父級的空間）

1             .box1 {
2                 width: 200px; height: 100px; background-color: #FF9900;
3                 transition: 0.5s;
4             }
5             .box1:hover {
6                 /* scale括號里只能是正數或0 */
7                 transform:scale(2);
8             }

1     <body>
2         <div style="border: #000000 1px solid; margin-left: 200px; margin-top: 200px;">
3             <div class="box1">看看我的變化div>
4         div>        
5     body>

還有一個函數translate，它的意思就是位移！translateX只是它的分支。比如，向左移動50px之類的。

1             .box1 {
2                 width: 200px; height: 100px; background-color: #FF9900;
3                 transition: 0.5s;
4             }
5             .box1:hover {
6                 /* 沿x軸移動100px */
7                 transform:translateX(100px);
8             }

?5.變形基點transform-origin

上面說到的旋轉、平移，縮放，其實都有個基點（可以理解為變形中未動的點，先用釘子將該點釘起來，然后完成變形，釘的點不同，變形后新位置當然也不一樣！），默認的是正中心位置（重心），上圖表明下基點是什么，如下：

基點在左上角和中心進行旋轉的話，區別如下圖

?transform-origin要和transform一起用，畢竟如果沒有transform變形，談基點有什么意義呢？

/*
xyz代表了x軸，y軸，z軸，它們的取值如下
x軸取值可以為：left、center、right、length（某像素）、%（某百分比）
y軸取值可以為：top、center、bottom、length（某像素）、%（某百分比）
z軸取值可以為：length（某像素）
*/
transform-origin: x y z;
/*
默認：transform-origin:50% 50% 0
JS中：object.style.transformOrigin="20% 40%"
*/

GPU云服務器云服務器縮放效果旋轉效果 html 移動端縮放 js 移動端效果圖

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1387.html

CSS3的過渡和動畫

摘要：轉化的轉化分為以下幾種移動旋轉縮放傾斜混合每種轉化都還有對應的版本注意閉合的內聯元素不支持轉化，過渡和動畫如等。過渡和動畫都是CSS3的重要部分，今天有時間，了解些相關內容并記錄下。在開始之前，首先看看CSS3的轉化。轉化 CSS3的轉化分為以下幾種： translate 移動 rotate　旋轉 scale　縮放 skew　傾斜 matrix　混合每種轉化都還有對應的3d版...

andong777 2019-08-30 13:53 評論0 收藏0
基礎知識：css3核心知識整理

摘要：前綴瀏覽器兼容根據了解，屬性大部分支持，部分支持，少部分支持前綴蘋果谷歌火狐瀏覽器世界之窗例如兼容轉換過渡關鍵幀動畫轉換及以上支持，需添加前綴屬性的方法使用縮放軸縮放倍，軸縮放倍，只有一個值時為縮放倍數傾 css3前綴（瀏覽器兼容）根據了解，css3屬性大部分支持ie10，部分支持ie9，少部分支持ie8 // 前綴 // -webkit- Safari and Chrome（...

kycool 2019-08-30 15:55 評論0 收藏0
css3中的變形（transform）

摘要：字面上的意思就是使改變外觀改變形態在中主要包括以下幾種旋轉傾斜縮放移動下面我們就一起來看看的具體如何實現。負值是允許的，這樣是元素逆時針旋轉。如果您有更好的建議，不如留言一起討論，共同進步再次感謝您耐心的讀完本篇文章。 transform 字面上的意思就是使改變外觀、改變形態在css3中transform主要包括以下幾種 1.旋轉 rotate 2.傾斜 skew 3.縮放 sca...

xiaoxiaozi 2019-08-30 11:09 評論0 收藏0
transform 變形

摘要：變形通過變換，我們能夠對元素進行移動縮放轉動拉長或拉伸。對元素進行變形。對元素某個屬性或多個屬性的變化，進行控制時間等，類似的補間動畫。但只有兩個關鍵貞。負值是允許的，這樣是元素逆時針旋轉。 transform 變形通過 CSS3 變換，我們能夠對元素進行移動、縮放、轉動、拉長或拉伸。使用transform屬性為元素應用變換。 1、Transform：對元素進行變形。 2、Trans...

Fourierr 2019-08-30 11:08 評論0 收藏0