CSS3 transform變形

ransform變形

transform在字面上就是變形、改變之意。

CSS3的transform主要包括rotate(旋轉)、skew(扭曲)、scale(縮放)和translate(移動)以及matrix(矩形變形)。

rotate使用格式:(取值范圍0-360, 單位deg)

rotate(10deg)

rotate(360deg)

rotateX(angle) 定義沿著 X 軸的 3D 旋轉。

rotateY(angle) 定義沿著 Y 軸的 3D 旋轉。

rotateZ(angle) 定義沿著 Z 軸的 3D 旋轉。

角度等同于鐘表: 12點: 0deg 3點: 90deg 6點: 180deg 9點: 270deg

【實例】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>圖片轉換演示</title>
<style type="text/css">
img{
    width:460px;
    height:480px;
    border-radius:50%;
    transition:1s;
}
/*
過渡到···deg,而不是過渡···deg
*/
img:hover{
    /*transform: rotate(45deg);*/
    transform: rotateX(45deg);/*沿著x軸旋轉*/
    transform: rotateY(45deg);/*沿著y軸旋轉*/
    transform: rotateZ(45deg);/*沿著z軸旋轉*/

    /*正數順時針*/
    transform: rotate(45deg);/*z軸*/
    /*負數逆時針*/
    transform: rotate(-45deg);/*z軸*/

}
</style>
</head>
<body>
<img src="http://p1.ifengimg.com/2018_42/C03628FF6F4ED06948E0A488AD90E26E780BA05E_w981_h658.jpg"/>
</body>
</html>

transform-origin: 設置旋轉元素的基點位置

實例2: 旋轉基點

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
img{
    width: 300px;
    height: 220px;
    display: block;
    margin: 100px auto;

    transition: 1s linear;

    /*我們的旋轉基點默認是中心*/
    /*規定旋轉基點的
    * ①方位名詞left top bottom right center
    * ②px(注意坐標原點為左上角)
    * ③%(參考的是寬高)*/
    transform-origin: center center;
    transform-origin: right top;
    transform-origin: -300px 110px;
    transform-origin: 150px 110px;
    transform-origin: 50% 50%;
    transform-origin: 100% 100%;

}
body:hover>img{
    transform: rotateX(45deg);/*沿著x軸旋轉*/
    transform: rotateY(45deg);/*沿著y軸旋轉*/
    transform: rotateZ(45deg);/*沿著z軸旋轉*/
    transform: rotate(360deg);/*z軸*/
}
</style>
</head>
<body>
<img src="img/薛凱琪.jpg"/>
</body>
</html>

skew使用格式:(取值范圍0-180, 單位deg)

skew(10deg,10deg)

skew(180deg,180deg)

實例: 斜切

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
img{
    width: 400px;
    height: 300px;
    display: block;
    margin: 100px auto;

    transition: 1s;
}

img:hover{
    transform: skewX(45deg);
    transform: skewX(-45deg);
    transform: skewY(45deg);
    transform: skewY(-45deg);

    /*skew(x軸斜切角度,y軸斜切角度)*/

    /*skew(x,y)同步動畫*/
    /*transform: skew(45deg,45deg);*/


    /*現在x斜切基礎之上再進行y斜切*/
    transform: skewX(45deg) skewY(45deg);
    transform: skewY(45deg) skewX(45deg);

}
</style>
</head>
<body>
<img src="img/薛凱琪.jpg"/>
</body>
</html>

scale使用格式：

scale(0.2)

scale(2)

scale(2,3)

scale(0.5,2)

實例: 縮放

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
img{
    width: 400px;
    height: 300px;
    display: block;
    margin: 100px auto;

    transition: 1s;
}
img:hover{
    transform: scale(1);/*本身*/
    transform: scale(2);/*擴大*/
    transform: scale(0.5);/*擴大*/
    transform: scale(-1);/*倒立*/
    transform: scale(-2);/*倒立放大2倍*/
    transform: scale(-0.5);/*倒立縮小1半*/
}
</style>
</head>
<body>
<img src="img/薛凱琪.jpg"/>
</body>
</html>

translate使用格式：

translate(10px)

translate(20px,20px)

translate(-25px,-25px)

實例: 平移

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
img{
    width: 400px;
    display: block;
    margin: 100px auto;
    transition: 1s;
}

img:hover{
    transform: translateX(100px);
    transform: translateX(-100px);
    transform: translateY(100px);
    transform: translateY(-100px);
    transform: translate(100px,100px);


    /*%參考的是各自的寬和高*/
    transform: translateX(100%);
    transform: translateY(100%);
}
</style>
</head>
<body>
<img src="img/薛凱琪.jpg"/>
</body>
</html>

綜合使用: 旋轉、斜切、縮放

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
div{
    width: 400px;
    height: 300px;
    margin: 100px auto;
    background-color: orange;

    transition: 1s;
}
div:hover{
    /*transform: rotate(360deg);
    transform: skew(45deg);*/

    /*綜合使用*/
    transform: rotate(360deg) skew(45deg) scale(0.5);
}
</style>
</head>
<body>
<div></div>
</body>
</html>

css3新增特性都不會對盒子模型產生影響, 盒子模型大概永遠是由width/height+padding+border+marign組成

言

在CSS3中新增了很多的新特性，其中使用頻率比較高的應該是動畫效果了，它可以幫助我們實現以前使用Javascript才能實現的效果，極大的提高網頁的性能。今天這篇文章我們就來一起看一個使用CSS3新特性完成的翻書效果吧。

本文的源碼已經放在了Github上，感興趣的可以clone到本地試試，地址如下。

https://github.com/zhouxiongking/article-pages/blob/master/articles/rollPage/rollPage.html

CSS3

實現效果

首先我們來看看實際的運行效果，動態圖如下所示。

效果圖

頁面分析

在看到上述的效果圖后，我們來進行分析，這個過程是如何實現的。

這個頁面我們通過一個ul包含三個li來實現，每個li都給一個固定的寬度和高度。

第一個li在頁面上靜止不動。
第二個li添加動畫效果，使其直接繞Y軸翻轉360度。
第三個li添加動畫效果，但是翻轉周期是在25%的時候開始，因此會有一種翻書的速度差異感。

上面的步驟分析完后就剩下最重要的一個過程，那就是給外層的ul元素添加perspective屬性，這個屬性是決定這個動畫能不能實現的主要的因素。

perspective

perspective是CSS3中新增的屬性，表示的是設置某個元素被查看的視角，用于實現3D效果。

需要注意的是當某個元素設置了perspective屬性時，其子元素會獲得透視效果，而不是這個元素本身。

我們來看一個簡單的例子，有一個section父元素和一個div子元素，讓div元素旋轉45度，html元素如下。

html元素

其對應的CSS屬性如下。

CSS屬性

在section元素上，如果不使用perspective的情況下，得到效果如下圖所示。

效果圖1

如果給section元素加上perspective屬性，并設定600px時，得到的效果圖如下。

效果圖

通過以上兩幅圖的對比我們發現，兩幅圖在Y軸的視角上發生了變化。

接下來，我們來具體看看這個翻書效果的代碼實現。

翻書效果HTML代碼

通過之前的分析，我們知道這個效果是通過ul與li來實現的，html部分代碼如下。

HTML代碼

翻書效果CSS代碼

首先看看ul與li的基本css屬性，記住這里需要給ul元素添加perspective屬性。

基本CSS屬性

然后是給第二個li添加動畫。

第二個li的css屬性

最后是給第三個li添加動畫。

第三個li的css屬性

注意到上面的代碼中有個25%和100%的設置，這個和第二個li不同，所以會有一種翻轉書頁快慢的差異感。

如果按照上述代碼來做，即可實現文章開始的翻書動畫效果。

結束語

今天這篇文章主要是通過CSS3新增的屬性實現了一個翻書動畫效果，大家學會了嗎？

然CSS3在兼容性方面不盡如意，但是，在一些動畫效果方面，為廣大前端開發人員帶來了福音。既可以實現炫酷的渲染效果，又擺脫了必須使用腳本語言的弊端。在CSS3中，可以利用transform功能的縮放 scale、旋轉 rotate、移動 translate來實現文字或圖像的旋轉、縮放、傾斜、移動。

1. scale(x,y) 對元素進行縮放

X表示水平方向縮放的倍數 | Y表示垂直方向的縮放倍數

Y是一個可選參數，沒有設置的話，則表示X，Y兩個方向的縮放倍數是一樣的。并以X為準。

CSS代碼：

.test{

-moz-transform:scale(2,2);

-webkit-transform:scale(2,2);

-o-transform:scale(2,2);

width:198px;

height:133px;

background：#f00；

}

2. rotate(x,y,z,angle) 對元素進行旋轉

X表示沿著X軸旋轉

Y表示沿著Y軸旋轉

Z表示沿著Z軸旋轉

CSS代碼：

.text{

-webkit-transform: rotate(-90deg);

-moz-transform: rotate(-90deg);

-o-transform: rotate(-90deg);

width:198px;

height:133px;

background：#f00；

}

3. translate(x,y)對元素進行移動

X表示水平方向的移動距離 | Y表示垂直方向的移動距離

CSS代碼：

.text{

-moz-transform: translate(10px, 20px);

-webkit-transform: translate(10px, 20px);

-o-transform: translate(10px, 20px);

width:198px;

height:133px;

background：#f00；

}

今天，就先說這么多吧。感謝大家的賞臉，希望對大家有所幫助。

在線咨詢

上一篇：PHP轉換HTML為PDF文檔的方法和常見問題
下一篇：九大維度幫你選出最理想的HTML網頁內容提取工具

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS3 transform變形

言

實現效果

頁面分析

perspective

翻書效果HTML代碼

翻書效果CSS代碼

結束語

您的項目需求