CSS3二维变形
来源:互联网 发布:js 寻找字符串 编辑:程序博客网 时间:2024/06/18 01:08
CSS3二维变形
特点:所有的二维变形(转化),都是刷的一下就过去了,没有任何的过渡效果。
1、Transform转换属性
transform
2、Transform 方法
(1)偏移:translate(x,y)
X表示水平方向的移动,y表示竖直方向的移动。负值表示往反方向移动。
transform: translate(890px,200px);//偏移
使用该方法,可以实现 元素的 水平和垂直方向的居中
.box{ width: 100px; height: 100px; border: 1px solid grey; position: fixed; top: 50%; left:50%; transform: translate(-50%,-50%);}
translateX ==translate(x,0),translateY==translate(0,y)
(2)缩放:scale(x,y)
X表示放大或者缩小元素的宽度,Y表示的是放大或者缩小元素的高度。
scaleX()表示只对元素宽度进行缩放;scaleY()表示只对元素高度进行缩放。
当里面的值为负值的时候,是先把元素进行了翻转,然后在对元素进行缩放操作;当里面的值在(0-1)的时候缩小;当里面的值大于1的时候是放大。
transform:scale(-1);//缩放
(3)旋转:rotate(Xdeg)–了解即可
当里面的值为正的时候,元素沿顺时针方向旋转,反之,逆时针旋转。
transform:rotate(-60deg);//旋转
(4)倾斜:skew(Xdeg,Ydeg)–了解即可
X表示的是元素绕着水平方向倾斜Xdeg,Y表示的是元素绕着竖直方向倾斜Ydeg。
transform:skew(20deg,20deg);//倾斜
(5)使用六个值的矩阵: matrix(a,b,c,d,e,f)–了解即可
比如matrix(1,0,0,1,400,50),表示将元素向右移动400px,再向下移动50px。
transform:matrix(1,0,0,1,400,50);
阅读全文
0 0
- Css3二维变形
- CSS3二维变形
- CSS3-二维变形
- CSS3 二维变形
- css3变形
- css3变形
- css3-变形
- CSS3变形
- 【css3】变形
- CSS3变形
- CSS3中的transform变形
- css3 transform 变形
- css3--变形(transform
- 【CSS3】变形记
- css3(transform变形)
- css3-变形transforms
- CSS3变形属性:CSS33DTransform
- CSS3中的transform变形
- 夜灵的Html笔记Day09——定位、渐变
- 定位、复制、清除数据有效性
- skynet co_create
- [笔记分享] [RPM] msm8610 RPM 流程
- 单链表删除头结点时出错解决方法
- CSS3二维变形
- JavaBean转换为Csv
- Ubuntu启动后循环登录界面
- 求两个数的最大公约数和最小公倍数
- Codeforces Round #431 (Div. 2) A B C D E
- Codeforces 854B Maxim Buys an Apartment
- Java系列-Set、List、Map的遍历总结
- Java基础学习(四)--代码块的问题
- Gson @SerializedName