Skip to Content
MOBILE HTML5學習手冊
book

MOBILE HTML5學習手冊

by Estelle Weyl
June 2014
Intermediate to advanced
488 pages
9h 56m
Chinese
GoTop Information, Inc.
Content preview from MOBILE HTML5學習手冊
CSS3:變形、漸變與動畫
|
315
10-2  設成預設值的原點,與設成左上角的原點,會產生不同的變形效果。本圖是將元素旋轉
90 度的情形
…其中
top left, 0 0, 0 0 0,
top left 0
都是相同的
6
。設定原點之後(或省略,因
此設定為預設值
transform-origin: center center 0;
,就可選擇變形種類,我們使用
transform
特性及一或多個變形值來設定。
transform 特性
CSS
transform
特性已取得 Firefox 3.5+Opera 10.5Internet Explorer 9 WebKit(甚
至在 iPhone 問世之前)的支援,它可以讓你修改 CSS 模型的座標空間,將元素平移、
旋轉、調整大小,及傾斜。CSS 變形會修改座標空間,讓我們改變內容的位置,但不會
干擾文件流。變形後的元素佔用的位置與空間,就是元素變形之前佔用的位置與空間。
我們使用變形功能來改變元素的外觀。
transform
特性的值是一串以空格分隔的變形函
式,它們會被依序套用。
transform
函式包括:
translate()
如圖 10-3 所示的
translate(x, y)
功能函式類似相對定位、平移或重新定位,會將一個
元素由左往右移動 x,及由上往下移動 y
-webkit-transform: translate(15px, -15px);
-ms-transform: translate(15px, -15px);
transform: ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

AirBnbBlueOriginElectronic ArtsHomeDepotNasdaqRakutenTata Consultancy Services

QuotationMarkO’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.
Julian F.
Head of Cybersecurity
QuotationMarkI wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.
Addison B.
Field Engineer
QuotationMarkI’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.
Amir M.
Data Platform Tech Lead
QuotationMarkI'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.
Mark W.
Embedded Software Engineer

You might also like

JAVASCRIPT網頁應用程式設計

JAVASCRIPT網頁應用程式設計

Alex MacCaw

Publisher Resources

ISBN: 9789863471240