博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css3 2D转换
阅读量:5263 次
发布时间:2019-06-14

本文共 564 字,大约阅读时间需要 1 分钟。

div

{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

1.translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。

transform: translate(50px,100px);

2.rotate()方法,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。

transform: rotate(30deg);

3.scale()方法,该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数

transform: scale(2,4);  转变宽度为原来的大小的2倍,和其原始大小4倍的高度。

4.skew()方法,该元素会根据横向(X轴)和垂直(Y轴)线参数给定角度

transform: skew(30deg,20deg);

5.matrix()方法和2D变换方法合并成一个。

matrix 方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。

转载于:https://www.cnblogs.com/wuqiong/p/4874776.html

你可能感兴趣的文章
杂七杂八的小笔记本
查看>>
51Nod1353 树
查看>>
CF1215E Marbles
查看>>
.net Core 图片验证码 基于SkiaSharp实现
查看>>
fish redux 个人理解
查看>>
java 笔记一些
查看>>
BZOJ2339 HNOI2011卡农(动态规划+组合数学)
查看>>
BZOJ3811 玛里苟斯(线性基+概率期望)
查看>>
简单的异步函数async/await例子
查看>>
一个点击事件引发的案件
查看>>
Android.mk介绍
查看>>
json 字符串转成对象
查看>>
octave基本操作
查看>>
排球计分程序重构(一)
查看>>
go 文件上传
查看>>
axure学习点
查看>>
javascript: 处理URL字符串
查看>>
MATLAB数值计算与数据分析(2)
查看>>
JUnit
查看>>
WPF文本框只允许输入数字[转]
查看>>