CSS3:2D转换方法

利用transform 可以实现旋转、缩放、倾斜、移动

属性有:translate、scale

移动:

translateX(10px); //水平方向移动10px

translateY(50px); //垂直方向移动50px

translate(10px);    //水平方向移动10px

translate(10px,50px);   ///水平方向移动10px,垂直方向移动50px

缩放:

scaleX(2);    //宽增大为原来的两倍

scaleY(2);    //高增大为原来的两倍

scale(2);   //增大为原来的2倍

scale(1,2);    //宽不变,高增大为原来的2倍

旋转:

rotate(30deg);    //旋转30度

倾斜:

skewX(30deg);    //沿着X轴倾斜30度

skewY(30deg);   //沿着Y轴倾斜30度

skew(10deg,20deg);     //沿X轴倾斜10度,沿Y轴倾斜20度

当然,要兼容的话就要写全前缀了:如

transform:rotate(7deg);
-ms-transform:rotate(7deg);     /* IE 9 */
-moz-transform:rotate(7deg);     /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg);     /* Opera */

matrix:比较复杂,涉及到矩阵的运算,对应的矩阵是

  (省略1w+字..)

只需要给abcdef附上相应的值就可以了

translate(tx,ty)可以由matrix(1,0,0,1,tx,ty)转换而来

scale(sx,sy)可以由matrix(sx,0,0,sy,0,0) 转换而来

rotate(θ)可以由matrix(cosθ,sinθ,-sinθ,cosθ,0,0) 转换而来

skew(θx,θy)可以由matrix(1,tan(θy),tan(θx),1,0,0) 转换而来

更多看此文章:http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/

演示:http://peterned.home.xs4all.nl/matrices/

时间: 2024-11-06 03:51:15

CSS3:2D转换方法的相关文章

CSS3 2D

2D变换的效果,让某个元素改变形状,大小和位置. 新转换属性 2D 转换方法 参考:CSS3 2D转换

CSS3 2D 转换【旋转transform:rotate(30deg); 移动transform: translate(50px,100px); 放大缩小transform:scale(2,4)】

CSS3 2D 转换 CSS3 转换 CSS3转换,我们可以移动,比例化,反过来,旋转,和拉伸元素. 它是如何工作? 变换的效果,让某个元素改变形状,大小和位置. 您可以转换您使用2D或3D元素. 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号. 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号. Property           transform 36.0 4.0 -webkit- 10.0 9.0 -ms- 16.0 3.5

css3 2D 3D 过渡

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>css3动画</title> </head> <style> .xuanzhuan{ width: 100px; height: 80px; background: red; transform:rotate(10deg); /*旋转:rotate() 参数为(0-360d

CSS3 2D、3D 转换

一.CSS3 转换 通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 浏览器支持 Internet Explorer 10.以及 Opera 支持 transform 属性. 注释:Internet Explorer 9 需要前缀 -ms-. Chrome 和 Safari 需要前缀 -webkit-. 二.2D 转换 在本章中,您将学到如下 2D 转换方法: translate() rotate() scale() skew() matrix() 1.translate(

css3 2d转换3d转换以及动画的知识点汇总

css3 2d转换 2d转换的方法: 1.移动 translate(x, y) 可以改变元素的位置,x.y可为负值: 2.缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x.y的取值可为小数,不可为负值: 4.旋转 rotate(deg) 可以对元素进行旋转,正值为顺时针,负值为逆时针: 5.倾斜 skew(deg, deg) 可以使元素按一定的角度进行倾斜 2d转换的属性: transform transform-origin 用法: 例如: div { transform:

CSS3 2D Transform

在 一个二维或三维空间,元素可以被扭曲.移位或旋转.只不过2D变形工作在X轴和Y轴,也就是大家常说的水平轴和垂直轴:而3D变形工作在X轴和Y轴之外, 还有一个Z轴.这些3D变换不仅可以定义元素的长度和宽度,还有深度.我们将首先讨论元素在2D平面如何变换,然后我们在进入3D变换的讨论. CSS3 2D变换让Web设计师有了更多的自由来装饰和变形HTML组件.同时让设计师有更多的功能装饰文本和更多动画选项来装饰Div元素.在CSS3 2D变形中主要包含的一些基本功能如下. 位移translate()

【Demo】CSS3 2D转换

2D转换: 2D变换方法: translate() 根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动. div { transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */ } translate值(50px,100px)是从左边元素移动50个像

CSS3 2D、3D转换

2D转换方法:transform().rotate().scale().skew().matrix() 3D转换方法:rotateX().rotateY() 1.示例代码 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>2D.3D转换</title> <style> section{width:

CSS3 2D 转换

2D 转换 在本章中,您将学到如下 2D 转换方法: translate() rotate() scale() skew() matrix() 您将在下一章学习 3D 转换. 实例 div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg);

CSS自学笔记(13):CSS3 2D/3D转换

CSS3中新增了对元素进行2D和3D的转换效果,这样可以是开发人员很方便的做出视觉效果更好的网页来. 通过CSS3中属性的定义,我们可以对元素进行移动.缩放.拉伸.旋转等等,可以通过定义transform属性来实现转换效果. 浏览器支持 属性 浏览器支持 2D transform IE Firefox Chrome(-webkit-) Safari(-webkit-) Opera 3D transform IE Firefox Chrome(-webkit-) Safari(-webkit-)