DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS3基礎 >> 9.4 旋轉rotate()方法
9.4 旋轉rotate()方法
編輯:CSS3基礎     

一、rotate()方法

在CSS3中,我們可以使用rotate()方法來將元素相對中心原點進行旋轉。這裡的旋轉是二維的,不涉及三維空間的操作。關於3D變形,請關注我們未來上線的CSS3進階教程。

語法:

transform:rotate(度數);

說明:

度數指的是元素相對中心原點進行旋轉的度數,單位為deg。其中,deg是degree(度數)的縮寫。

如果度數為正,則表示元素相對原點中心順時針旋轉;如果度數為負,則表示元素相對原點中心進行逆時針旋轉。

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3旋轉rotate()方法</title>
    <style type="text/css">
        /*設置原始元素樣式*/
        #origin
        {
            margin:100px auto;/*水平居中*/
            width:200px;
            height:100px;
            border:1px dashed gray;
        }
        /*設置當前元素樣式*/
        #current
        {
            width:200px;
            height:100px;
            line-height:100px;
            color:white;
            background-color: #007BEE;
            text-align:center;
            transform:rotate(30deg);
            -webkit-transform:rotate(30deg);  /*兼容-webkit-引擎浏覽器*/
            -moz-transform:rotate(30deg);     /*兼容-moz-引擎浏覽器*/
        }
    </style>
</head>
<body>
    <div id="origin">
        <div id="current">順時針旋轉30度</div>
    </div>
</body>
</html>

在浏覽器預覽效果如下:

分析:

這裡虛線框為原始位置,藍色背景盒子為順時針旋轉30度後的效果。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved