css3學習系列之初識 transform 一

一、transform是哈?

從字面意思來看　transform的含義是：改變，使…變形；轉換,對　沒錯　就是變形

變形當有　放大縮小 東倒　西歪,剛好css3中 transform 也出這個　放幾個類似詞

transform:rotate(旋轉)乙個東西你想旋轉多少度 就是多少 #rotate ,

它的方向是順時針方向 0- n度隨你玩 當然你輸入乙個負數也可以玩的

transform:skew(傾斜) 有點東倒西擺的樣子和旋轉有點類似但又不同,這個傾斜是把東西壓扁了模樣變形了

以垂直方向y軸來分　左邊為正,右邊負

transform:scale　比例skwe:表示比例　是原來的多少倍　就是在原基礎上放大或者縮小

transform:translate 變動,一聽起哈叫變動太轉業了吧,其實就是x y改變發生位移 如translate(-120px,-100px);

-120px表示向左位移 -100表示向上位移

二、看看transform出現哈效果

對照一的說明,在來看二的效果圖　現在是不是知道 transform的基本功效果了!

三、上**:

doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" ""

>
<
html 
xmlns
="">
<
head
>
<
title
>css3元素旋轉
title
>
<
style 
type
="text/css"
>
.demo 
/*rotate旋** 是以順時針方向
*/#rotate 
/*skew傾斜: 以垂直方向y軸來分　左邊為正,右邊負
*/#skew 
/*比例skwe:表示比例　是原來的多少倍
*/#scale
/*translate變動： -120px表示向左位移 -100表示向上位移
*/#translate
style
>
head
>
<
body
>
<
div 
style
="float:left; margin-left:100px"
>
<
div 
class
="demo"
id="div1"
>
你好world,我是角度旋轉rotate
div>
<
br />
<
div 
class
="demo"
id="div2"
>
你好world,我是傾斜skew
div>
<
br />
<
div 
class
="demo"
id="div3"
>
你好world,我是比例scale
div>
<
br />
<
div 
class
="demo"
id="div4"
>
你好world,我是變動 位移 translate
div>
div>
<
div 
style
="float:left; margin-left:200px"
>
<
div 
class
="demo"
id="rotate"
>
你好world,我是角度旋轉rotate
div>
<
br />
<
div 
class
="demo"
id="skew"
>
你好world,我是傾斜skew
div>
<
br />
<
div 
class
="demo"
id="scale"
>
你好world,我是比例scale
div>
<
br />
<
div 
class
="demo"
id="translate"
>
你好world,我是變動 位移 translate
div>
<
div>
body
>
html
>

css3系列 概述

css3分成了不同類別，稱為 modules 而每乙個 modules 都有於css2中額外增加的功能，以及向後相容。css3早於1999年已經開始制訂。18 直到2011年6月7日，css 3 color module終於發布為w3c recommendation。19 css3裡增加了不少功能，...

css3新特性學習系列 border

css3新特性 border屬性 border radius border image box shadow 詳解 1 border radius 圓角 支援 ie9 用法 border radius 25px 25px 25px 25px 有四個值，分別表示 top left top right ...

初識CSS3之動畫模組

css3之動畫模組 與過度模組之間的區別 不同點過度模組必須人為觸發才會執行動畫 動畫模組不需要人為觸發就可以執行的動畫 相同點過度模組和動畫模組都是用來給元素新增動畫的 過度和動畫模組都是系統新增的屬性 過度和動畫模組都需要滿足三要素才會有動畫效果 動畫模組三要素 css3 animation n...