您的位置：首页 > Web前端 > CSS

CSS3 变形效果（上）（20160829-0029）

2016-09-04 17:28 337 查看

一、transform

CSS3 提供了元素变形效果，也叫做变换。它可以将元素平移、缩放和旋转。属性有两个 transform 和 transform-origin。

属性	说明
transform	指定应用的变换功能
transform-origin	指定变换的起点

transform 的属性值：

属性值	说明
none	无变换
translate(长度值或百分数值) translateX(长度值或百分数值) translateY(长度值或百分数值)	在水平方向、垂直方向或两个方向，平移元素
scale(数值) scaleX(数值) scaleY(数值)	在水平方向、垂直方向或两个方向，缩放元素
rotate(角度)	旋转元素
skew(角度) skewX(角度) skewY(角度)	在水平方向、垂直方向或两个方向，使元素倾斜一定的角度
matrix(4~6 数值，逗号隔开)	指定自定义变换

/* 设置外边框，方便观察 */
body{
margin: 300px;
}

p{
border: solid 1px silver;
}

/******************** 平移 ********************/
img{
/* 水平平移 */
/*transform: translate(200px);*/
/*transform: translateX(200px);*/
/*transform: translateX(30%);*/

/* 垂直平移 */
/*transform: translate(0, 200px);*/
/*transform: translateY(200px);*/
/*transform: translateY(30%);*/

/* 水平、垂直两个方向平移，只写一个值的话会在水平方向移动 */
/*transform: translate(200px, 200px);*/

/* 如果设置成负值的话，会往相反的方向移动 */
/*transform: translate(-200px, -200px);*/
}
/******************** 缩放 ********************/
/* 提示：缩放只能是数值，大于1 表示放大，小于 1 表示缩小 */
img{
/* 水平方向缩放 */
/*transform: scale(2.0, 1.0);*/
/*transform: scaleX(2.0);*/
/*transform: scaleX(0.5);*/

/* 垂直方向缩放 */
/*transform: scale(1.0, 2.0);*/
/*transform: scaleY(2.0);*/

/* 水平、垂直两个方向都缩放 */
/*transform:scale(2.0, 2.0);*/
/*transform:scale(0.7, 2.0);*/
}
/******************** 旋转 ********************/
/* 提示：旋转角度 0 ~ 360 度之间，负值也可以 */
img{
/*transform: rotate(45deg);*/
/*transform: rotate(450deg);*/
}
/******************** 倾斜 ********************/
/* 提示：倾斜角度 0 ~ 360 度之间，负值也可以 */
img{
/* 水平倾斜元素 */
/*transform: skewX(45deg);*/
/*transform: skewX(-45deg);*/

/* 垂直倾斜元素 */
/*transform: skewY(45deg);*/
/*transform: skewY(-45deg);*/

/* 倾斜元素(水平、垂直) */
/*transform:skew(45deg, 60deg);*/
}
/******************** 自定义变换 ********************/
img{
/* 通过六个值指定矩形，其内部公式比较复杂，请问度娘 */
/*transform: matrix(1, 0, 0, 1, 30, 30);*/
}
/******************** 简写 ********************/
img{
/* 不同的值可以累计，通过空格分割 */
/*transform: rotate(45deg) scale(1.4);*/
}

二、transform-origin

transform-origin 属性可以设置变换的起点。默认情况下，使用元素的中心作为起点。

属性值	说明
百分数值	指定元素 x 轴或 y 轴的起点
长度指	指定距离
left center right	指定 x 轴的位置
top center bottom	指定 y 轴的位置

这个属性是用来改变变形的基准点的，默认是元素的中心位置，如果你改变了基准点，它会按照新的基准点进行变形。

/******************** 改变基准点 ********************/
img{
/* 默认情况 */
/*transform-origin:center center;*/
/*transform-origin:50% 50%;*/

/* 以右上角为基准点 */
/*transform-origin:right top;*/
/*transform-origin: 290px 0px;*/
}

三、浏览器支持

	Opera	Firefox	Chrome	Safari	IE
支持需带前缀	11.5 ~ 22	3.5 ~ 15	4 ~ 35	3.1 ~ 8	9.0+
支持不带前缀	23+	16+	26+	无	10.0+

/******************** 兼容版 ********************/
img{
-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;
}

示例代码地址

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： translate scale rotate transform-origin 示例

相关文章推荐

新的分享

章节导航