CSS3 2D 轉(zhuǎn)換

CSS3 轉(zhuǎn)換

通過CSS3轉(zhuǎn)換，我們能夠?qū)υ剡M行移動、縮放、轉(zhuǎn)動、拉長或拉伸。

瀏覽器支持

IE10、FireFox以及Opera支持transform屬性。Chrome和Safari需要前綴-webkit-.

注釋：IE9需要前綴-ms-.

2D 轉(zhuǎn)換

在本章您將了解2D變換方法：

translate()

rotate()

scale()

skew()

matrix()

translate()方法

元素從當前位置移動，根據(jù)給定的left(x坐標)和top(y坐標)位移參數(shù):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style type="text/css">
    /*translate方法位移*/
        div {
        width:100px;
        height:80px;
        background-color:orange;
        position:absolute;
        left:100px;
        top:100px;
        }
        div.one {
        transform:translate(30px,30px);
        z-index:1;
        }
        div.two {
        background-color:blue;
        }
</style>
</head>
<body>
   <div class="one"></div>
   <div class="two"></div>
</body>
</html>

rotate()方法

元素順時針給定的角度、允許負值，元素將逆時針旋轉(zhuǎn)。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style type="text/css">
    div {
    width: 150px;
    height: 50px;
    background-color: orange;
    text-align: center;
    position: absolute;
    left: 100px;
    top: 100px;
    }
    div.one {
    transform: rotate(30deg);
    -webkit-transform:rotate(30deg);
    }
    div.two {
    background-color: blue;
    color: white;
    }
</style>
</head>
<body>
   <div class="one"></div>
   <div class="two"></div>
</body>
</html>

scale() 方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style type="text/css">
    div{
    width: 100px;
    height: 100px;
    background-color: orange;
    position: absolute;
    left: 100px;
    height: 100px;
    }
    div.one {
    background-color: red;
    transform: scale(0.5,0.5);
    }
</style>
</head>
<body>
   <div>
     <div class="one"></div>
   </div>
</body>
</html>

skew()方法

通過skew()方法，元素傾斜給定的角度，根據(jù)給定的水平線（X軸）和垂直線（Y軸）參數(shù)：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style type="text/css">
    div{
    width:100px;
    height:100px;
    background-color:orange;
    position:absolute;
    left:100px;
    top:100px;
    }
    div.one {
    background-color:red;
    transform:skew(30deg,10deg);
    }
</style>
</head>
<body>
   <div></div>
   <div class="one"></div>
</body>
</html>

matrix() 方法

matrix()方法把所有2D轉(zhuǎn)換方法組合在一起。

matrix()方法需要六個參數(shù)，包含數(shù)學函數(shù)，允許你：旋轉(zhuǎn)、縮放、移動以及傾斜元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style type="text/css">
    div{
    width:100px;
    height:100px;
    background-color:orange;
    position:absolute;
    left:100px;
    top:100px;
    }
    div.one {
    transform:matrix(0.866,0.5,-0.5,0.866,0,0);
    background-color:red;
    }
</style>
</head>
<body>
   <div></div>
   <div class="one"></div>
</body>
</html>

新轉(zhuǎn)換屬性

以下列出了所有的轉(zhuǎn)換屬性:

Property 描述 CSS

transform 適用于2D或3D轉(zhuǎn)換的元素 3

transform-origin 允許您更改轉(zhuǎn)化元素位置 3

2D 轉(zhuǎn)換方法

函數(shù) 描述

matrix(n,n,n,n,n,n) 定義 2D 轉(zhuǎn)換，使用六個值的矩陣。

translate(x,y) 定義 2D 轉(zhuǎn)換，沿著 X 和 Y 軸移動元素。

translateX(n) 定義 2D 轉(zhuǎn)換，沿著 X 軸移動元素。

translateY(n) 定義 2D 轉(zhuǎn)換，沿著 Y 軸移動元素。

scale(x,y) 定義 2D 縮放轉(zhuǎn)換，改變元素的寬度和高度。

scaleX(n) 定義 2D 縮放轉(zhuǎn)換，改變元素的寬度。

scaleY(n) 定義 2D 縮放轉(zhuǎn)換，改變元素的高度。

rotate(angle) 定義 2D 旋轉(zhuǎn)，在參數(shù)中規(guī)定角度。

skew(x-angle,y-angle) 定義 2D 傾斜轉(zhuǎn)換，沿著 X 和 Y 軸。

skewX(angle) 定義 2D 傾斜轉(zhuǎn)換，沿著 X 軸。

skewY(angle) 定義 2D 傾斜轉(zhuǎn)換，沿著 Y 軸。

Weiter lernen

neue Datei

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style type="text/css"> div{ width:100px; height:100px; background-color:orange; position:absolute; left:100px; top:100px; } div.one { transform:matrix(0.866,0.5,-0.5,0.866,0,0); background-color:red; } </style> </head> <body> <div></div> <div class="one"></div> </body> </html>

einreichen Code zurücksetzen

Automatische Operation