- HTML5 Web Application Development By Example Beginner's Guide
- J.M. Gustafson
- 270字
- 2021-08-13 16:50:24
Transforms
CSS3 transforms provide even more sophisticated effects. There are 2D and 3D transformations available. We will discuss some of the 2D transformations here. Transforms can be used with transitions to provide some interesting effects. Here is the basic form of the transform
property:
transform: function();
There are a few different 2D transform
functions. The first we'll look at is translate()
. It moves an element from its current position to a new position. It takes x and y positions as parameters. You can use negative values to move up and to the left. The following would move an element 10
pixels right and 25
pixels up:
transform: translate(10px, -25px);
The rotate()
function rotates an element by a given amount. The rotation amount can be specified in degrees or radians. Use negative values to rotate counter clockwise, positive for clockwise:
transform: rotate(45deg);
The scale()
function adjusts the size of an element by some factor. It takes one or two parameters. If only one parameter is provided, it scales by that amount. If two parameters are specified, it scales the horizontal and vertical axes separately. The following example doubles the width and halves the height of an element:
transform: scale(2, 0.5);
The last one we'll look at is the skew()
function. This function skews, or stretches an element. It takes two parameters which are the amounts to rotate the x and y axes by. Angles are specified the same as the rotate()
function:
transform: skew(45deg, 10deg);
Transformations also require browser-specific prefixes:
-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);
The following is how transformations would look like in a browser:

- iOS面試一戰(zhàn)到底
- CockroachDB權(quán)威指南
- HTML5+CSS3網(wǎng)頁設(shè)計(jì)
- PHP 7+MySQL 8動態(tài)網(wǎng)站開發(fā)從入門到精通(視頻教學(xué)版)
- Unity UI Cookbook
- Bootstrap 4 Cookbook
- Android玩家必備
- Test-Driven Development with Django
- Azure Serverless Computing Cookbook
- Java并發(fā)編程之美
- Python趣味編程與精彩實(shí)例
- ANSYS FLUENT 16.0超級學(xué)習(xí)手冊
- Java面向?qū)ο蟪绦蛟O(shè)計(jì)教程
- RESTful Web API Design with Node.js(Second Edition)
- Java Web 從入門到項(xiàng)目實(shí)踐(超值版)