H5学习笔记之Transform
来源:互联网 发布:我的购物车淘宝网手机 编辑:程序博客网 时间:2024/05/01 02:24
Transform字面上就是变形,改变的意思。在CSS3中transform主要包括以下几种:旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。下面我们一起来看看CSS3中transform的旋转rotate、扭曲skew、缩放scale和移动translate具体如何实现,老样子,我们就从transform的语法开始吧。
一、旋转rotate
rotate() : 其中angle是指旋转角度,如果设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。如:transform:rotate(30deg):
二、移动translate
移动translate我们分为三种情况:translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动);translateX(x)仅水平方向移动(X轴移动);translateY(Y)仅垂直方向移动(Y轴移动)。如transform:translate(100px,20px):
三、缩放scale
缩放scale和移动translate是极其相似,他也具有三种情况:scale(x,y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴 同时缩放);scaleX(x)元素仅水平方向缩放(X轴缩放);scaleY(y)元素仅垂直方向缩放(Y轴缩放),但它们具有相同的缩放中心点和基 数,其中心点就是元素的中心位置,缩放基数为1,如果其值大于1元素就放大,反之其值小于1,元素缩小。如 transform:scale(2,1.5):
四、扭曲skew
扭曲skew和translate、scale一样同样具有三种情况:skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的 角度值进行扭曲变形);skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形);skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形),具 体使用如下:
1、skew( [, ]) :X轴Y轴上的skew transformation(斜切变换)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则值为0,也就是Y轴方向上无斜切。 如:transform:skew(30deg,10deg):
五、矩阵matrix
matrix(, , , , , ) : 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向(X轴)和垂直方向(Y轴)重新定位元素,此属性值使用涉及到数学中的矩阵,
- H5学习笔记之Transform
- H5学习笔记之CSS3 animation
- H5学习笔记之代码简写
- H5学习笔记之CSS代码语法
- H5学习笔记之元素分类
- unity学习之Transform
- Unity3D学习之transform。
- css3学习之:transform
- transform-origin学习笔记之旋转与基点的关系
- h5学习笔记:Table
- H5学习笔记
- H5学习笔记
- h5学习笔记:Table2
- h5学习笔记:weui
- h5 canvas学习笔记
- H5学习笔记
- h5,css学习笔记
- H5 学习笔记1
- Sqlite 只能插入1000行
- 安卓开发,Dialog中如何引用Activity中的组件?
- 来电接听问题
- [转]截图原理(一)——Android自动化测试学习历程(1)
- Jquery过滤器的基本使用案例
- H5学习笔记之Transform
- Android Studio 2.0 真机调试 安装不了安装包
- 谁能提供一下Android4.1.2系统的签名工具
- 布局隐藏的时候抱空指针的错误
- asp链接mysql数据库
- OnItemClickListener()
- 我的2016——程序员年到三十,工作第四年
- SpringBoot 整合Mail发送功能问题与解决
- HTML入门学习笔记--CSS选择器(3)