CSS3 : transform 用于元素样式的转变,比如使元素发生位移、角度变化、拉伸缩小、按指定角度歪斜
transform结合transition可实现各类动画效果
transform :
transform 兼容各浏览器写法如下:
1 transform: /* 转变样式 */; 2 -ms-transform: /* 转变样式 */; /* IE 9 */ 3 -webkit-transform: /* 转变样式 */; /* Safari and Chrome */ 4 -o-transform: /* 转变样式 */; /* Opera */ 5 -moz-transform: /* 转变样式 */; /* Firefox */
可转变样式如下:
1、使元素位置移动:translate,语法:translate(x坐标, y坐标)
1 transform: translate(50px,100px); 2 -ms-transform: translate(50px,100px); /* IE 9 */ 3 -webkit-transform: translate(50px,100px); /* Safari and Chrome */ 4 -o-transform: translate(50px,100px); /* Opera */ 5 -moz-transform: translate(50px,100px); /* Firefox */
以上代码使元素位置横向移动50像素,纵向移动100像素
2、使元素按指定角度旋转多少度:rotate,语法: rotate(角度值deg)
1 transform: rotate(30deg); 2 -ms-transform: rotate(30deg); /* IE 9 */ 3 -webkit-transform: rotate(30deg); /* Safari and Chrome */ 4 -o-transform: rotate(30deg); /* Opera */ 5 -moz-transform: rotate(30deg); /* Firefox */
以上代码使元素顺时针旋转30度,如果值是负值,则是逆时针旋转
3、使元素按指定的倍数拉伸或缩小,里面的字体也会同时拉伸或缩小:scale,语法:scale(X轴倍数, Y轴倍数)
1 transform: scale(2,4); 2 -ms-transform: scale(2,4); /* IE 9 */ 3 -webkit-transform: scale(2,4); /* Safari 和 Chrome */ 4 -o-transform: scale(2,4); /* Opera */ 5 -moz-transform: scale(2,4); /* Firefox */
以上代码使元素的宽度拉伸2倍,高度拉伸4倍
4、使元素歪斜给定的角度:skew,语法:skew(x轴角度值deg,y轴角度值deg)
1 transform: skew(30deg,20deg); 2 -ms-transform: skew(30deg,20deg); /* IE 9 */ 3 -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */ 4 -o-transform: skew(30deg,20deg); /* Opera */ 5 -moz-transform: skew(30deg,20deg); /* Firefox */
transform-origin:
transform-origin用于设置旋转元素的基点位置,兼容语法:
1 transform-origin: /* 位置设置 */; 2 -ms-transform-origin: /* 位置设置 */; 3 -webkit-transform-origin: /* 位置设置 */; 4 -moz-transform-origin: /* 位置设置 */; 5 -o-transform-origin: /* 位置设置 */;
位置设置,分三处设置,语法:
1 transform-origin: x-axis y-axis z-axis;
x-axis : X轴线位置
y-axis :Y轴线位置
z-axis : Z轴线位置
位置可以是具体数值、百分比、left、right、center
数值示例:
1 transform-origin:0 100;
百分比示例:
1 transform-origin:20% 40%;
默认值设置:
1 transform-origin: left center;
原文地址:https://www.cnblogs.com/wm218/p/9246560.html
时间: 2024-10-31 05:32:19