css3 2D/3D转换
来源:互联网 发布:名片设计用什么软件 编辑:程序博客网 时间:2024/04/29 04:04
通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。
它如何工作?
转换是使元素改变形状、尺寸和位置的一种效果。
您可以使用 2D 或 3D 转换来转换您的元素。
2D 转换
如下 2D 转换方法:
- translate()
- rotate()
- scale()
- skew()
- matrix()
transform-origin 允许你改变被转换元素的位置
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
translate(x,y) 定义 2D 转换,沿着 X 和 Y 轴移动元素。
translateX(n) 定义 2D 转换,沿着 X 轴移动元素。
translateY(n) 定义 2D 转换,沿着 Y 轴移动元素。
scale(x,y) 定义 2D 缩放转换,改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换,改变元素的宽度。
scaleY(n) 定义 2D 缩放转换,改变元素的高度。
rotate(angle) 定义 2D 旋转,在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换,沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换,沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换,沿着 Y 轴。
3D 转换
CSS3 允许您使用 3D 转换来对元素进行格式化。
在本章中,您将学到其中的一些 3D 转换方法:
rotateX()
rotateY()
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化,仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化,仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化,仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换,通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换,通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换,通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。
- CSS3 2D转换&3D转换
- CSS3 2D转换 3D转换
- CSS3 2 2D 3D转换
- css3 2D/3D转换
- CSS3动画-2D、3D转换
- CSS3 2D/3D转换
- CSS3 3D 转换
- CSS3 3D 转换
- CSS3 3D 转换
- CSS3--3D转换
- css3 3d转换
- CSS3 3D转换
- CSS3 3D转换
- CSS3 2D 转换
- CSS3 2D转换
- CSS3 2D 转换
- CSS3 2D 转换
- CSS3--2D转换
- 算法分析与设计基础 学习笔记 第一章
- Hdu Stone Game ( 博弈论 )
- org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'kynamicDao'
- u-boot新结构浏览
- ARM启动 nfs 过程 杂记
- css3 2D/3D转换
- 由ADR/LDR看U-boot结构
- rootfs中第一个程序init进程分析
- AUTOCONFIGURE命令
- Android Camera简述
- jQuery心得4--jQuery案例剖析2-开发实用案例
- vc文件操作
- JAVA异常处理机制的个人理解(try catch throw finally)
- 2012-12-24 21:10 U-boot之重载