首页 > 代码库 > 第24章 CSS3变形效果（上）
第24章 CSS3变形效果（上）
第 24章 CSS3变形效果[上]
学习要点：
1.transform
2.transform-origin
3.浏览器版本
本章主要探讨 HTML5中 CSS3的变形效果，通过变形效果，可以平移、缩放和旋转元
素的功能。
一．transform
CSS3提供了元素变形效果，也叫做变换。它可以将元素实现旋转、缩放和平移的功能。
属性有两个：transform和 transform-origin。
属性 说明
transform 指定应用的变换功能
transform-origin 指定变换的起点
对于 transform的属性值，具体如下表：
属性值 说明
none 无变换
translate(长度值或百分数值) 在水平方向、垂直方向或两个方向上平移元素。
translateX(长度值或百分数值)
translatY(长度值或百分数值)
scale(数值) 在水平方向、垂直方向或两个方向上缩放元素
scaleX(数值)
scaleY(数值)
rotate(角度) 旋转元素
skew(角度)
skewX(角度)
skewY(角度) 在水平方向、垂直方向或两个方向上使元素倾斜一定的角度
matrix(4~6数值，逗号隔开)
指定自定义变换。
//向水平和垂直各移动 200像素，也可以使用百分比
transform: translate(200px,200px);
//向水平平移 200像素，不加后面的 0也可以
transform: translate(200px,0);
transform: translateX(200px);
//向垂直平移 200像素
transform: translate(0,200px);
transform: translateY(200px);
//水平、垂直方向放大 1.5倍
transform: scale(1.5);
transform: scale(1.5,1.5);
//水平、垂直方向缩小 0.8倍
transform: scale(0.8,0.8);
//水平方向放大 1.5倍
transform: scaleX(1.5);
//垂直方向放大 1.5倍
transform: scaleY(1.5);
//旋转元素，0 ~ 360度之间，负值均可
transform: rotate(-45deg);
//倾斜元素，0 ~ 360度之间，负值均可
transform: skew(45deg, 20deg);
//水平倾斜元素，0 ~ 360度之间，负值均可
transform: skewX(45deg);
//垂直倾斜元素，0 ~ 360度之间，负值均可
transform: skewY(45deg);
//通过六个数值指定矩形，其内部公式计算较为复杂，请百度吧
transform: matrix(1,0,0,1,30,30);
//不同的值可以累计，通过空格分割
transform: rotate(-45deg) scale(1.5);
二．transform-origin
transform-origin属性可以设置变换的起点。默认情况下，使用元素的中心作为起点。
具体设置方案参考如下表：
属性值 说明
百分数值 指定元素 x轴或 y轴的起点
长度值 指定距离
left
center 指定 x轴的位置
right
top
center 指定 y轴的位置
bottom
这个属性是用来改变变形的基准点的，默认是在元素的中心位置，如果你改变了基准点。
它就会按照这个基准点进行变形。
//默认值，以中心点变形
transform-origin: center center;
transform-origin: 50% 50%;
//以左上角为基准点变形
transform-origin: left top;
transform-origin: 0px 0px;
三．浏览器版本
查找网站
//兼容完整版
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-o-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>CSS3变形效果[上]</title>
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/style.css">
</head>
<body>
<div>我是HTML5</div>
111
</body>
</html>
@charset "utf-8";
body {
margin: 100px;
}
div {
width: 200px;
height: 200px;
background-color: green;
box-shadow: 2px 2px 2px gray;
/*平移*/
/*transform: translate(200px, 200px);*/
/*transform: translate(0, 200px);*/
/*transform: translateX(200px);*/
/*transform: translateY(200px);*/
/*缩放*/
/*transform: scale(1.5);*/
/*transform: scale(0.5);*/
/*transform: scale(1.5, 2.0);*/
/*transform: scaleX(0.5);*/
/*transform: scaleY(0.5);*/
/*旋转*/
/*transform: rotate(-45deg);*/
/*倾斜*/
/*transform: skew(45deg, 20deg);*/
/*transform: skewX(45deg);*/
/*transform: skewY(45deg);*/
/*通过六个值自定义矩形*/
/*transform: matrix(1, 0, 0, 1, 30, 30);*/
/*多个属性值空格隔开*/
/*transform: rotate(45deg) scale(1.5);*/
transform: rotate(45deg);
/*transform-origin: center center;*/
/*transform-origin: 50% 50%;*/
/*transform-origin: left top;*/
transform-origin: 0 0;
}
第24章 CSS3变形效果（上）