css3 transform转换

1.先说说css的坐标系:

x轴的正方向就是水平向右的方向
y轴的正方向就是垂直向下的方向
z轴的正方向就是屏幕到用户的方向

2.位移

translate(x,y):2d位移
translateX(n) 设置x轴方向的位移
translateY(n) 设置y轴方向的位移

translate3d(x,y,z):3d位移
translateZ(n) 设置z轴方向的位移

参数可以是具体的像素值,也可以是百分比(基于自己的宽高)

语法:

transform:translate(200px,0);

3.缩放

scale(x,y) 2d缩放,如果只传了一个值,则表示x,y都是这个值
scaleX(n) 设置x轴方向的缩放
scaleY(n) 设置y轴方向的缩放

scale3d(x,y,z) 3d缩放

语法:

transform:scale(2);

3.旋转

rotate() 2d旋转,顺时针方向

rotate3d(x,y,z) 3d旋转
rotateX(angle) 围绕x轴旋转
rotateY(angle) 围绕y轴旋转
rotateZ(angle) 围绕z轴旋转

语法:

transform:rotate(45deg)

要实现3d视角,需要设置

/* 3d模式 */
transform-style: preserve-3d;
/* 视距 */
perspective: 1200px;

rotateX效果

transform:   rotateX(360deg);

rotateY效果

transform:   rotateY(360deg);

rotateZ效果

transform:   rotateZ(360deg);

4.transform-origin

这个属性用来设置元素transform时的基点,默认为元素的中心,也就是center center
他的值有以下几种:
具体数值 例如50px 50px
关键字 left right top bottom center
百分比 20% 20%(基于元素大小)

我们前面的旋转的例子就是基于元素中心进行旋转的

将转换基点修改成左上角

transform-origin: 0 0;

5.scale与translate共用

如果scale()在前在前,则实际位移 = 设定的位移 * scale的倍数
建议translate写在前面

transform: translate(300px,0) scale(2) ;
//以 容器的中心点来计算,容器位移了300px

transform: scale(2) translate(200px,0);
//以 容器的中心点来计算,容器位移了400px
transform: scale(3) translate(100px,0);
//以 容器的中心点来计算,容器位移了300px
transform: scale(0.5) translate(200px,0);
//以 容器的中心点来计算,容器位移了100px

6.translate()和rotate()共用

rotate()写在translate前面的话会改变坐标系,从而改变translate的设定,所以是要是设置多值的话,建议把translate()写在前面

原文地址:https://www.cnblogs.com/OrochiZ-/p/11616405.html

时间: 2024-11-05 16:35:10

css3 transform转换的相关文章

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 transform中的Matrix(矩阵)

一.哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如“拉普拉斯不等式”).这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面“Matrix(矩阵)”的时候,难免会心生畏惧(即使你已经学过),正常心理.实际上,这玩意确实有点复杂. 然而,这却是屌丝逆袭的一个好机会. CSS同行间:你是不是有这样的感觉:哎呀呀,每天就是对着设计图切页面,貌似技术没有得到实质性地提升啊,或者觉得日后高度有限! 我们应该都知道二八法则(巴莱多定律),即任何一组东西中

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 transform中的matrix矩阵

CSS3中的矩阵CSS3中的矩阵指的是一个方法,书写为matrix()和matrix3d(),前者是元素2D平面的移动变换(transform),后者则是3D变换.2D变换矩阵为3*3, 如上面矩阵示意图:3D变换则是4*4的矩阵. 有些迷糊?恩,我也觉得上面讲述有些不合时宜.那好,我们先看看其他东西,层层渐进——transform属性. 具体关于transform属性具体内容可以点击这里补个课.稍微熟悉的人都知道,transform中有这么几个属性方法: .trans_skew { trans

CSS3 Transform变形理解与应用

CSS3 Transform变形理解与应用 Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开始,结束.Animation:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.可以设置多个关键贞. Transition与Animation:transition需要触发一个事件 ,而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元 素cs

CSS3 transform是什么?

CSS3 transform是什么? transform的含义是:改变,使…变形:转换 CSS3 transform都有哪些常用属性? transform的属性包括:rotate() / skew() / scale() / translate(,) ,分别还有x.y之分,比如:rotatex() 和 rotatey() ,以此类推. 下面我们来分解各个属性的用法: transform:rotate(): 含义:旋转:其中“deg”是“度”的意思,如“10deg”表示“10度”下同. .demo

理解CSS3 transform中的Matrix(矩阵)——张鑫旭

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2427 一.哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如“拉普拉斯不等式”).这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面“Matrix(矩阵)”的时候,难免会心生畏惧(即使你已经学过),正常心理.实际上,这玩意确实有点复杂. 然而,这却是屌丝逆袭的一个好机

CSS3 transform 属性

div { 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 */ } 该属性允许我们对元素进行旋转.缩放.移动或倾斜. CSS3 transform是什么?

如何使用 css3 transform 属性来变换背景图?

本文和大家分享的主要是使用 css3 transform 属性来变换背景图相关内容,一起来看看吧,希望对大家学习css3有所帮助. 使用 css3 transform 属性可以轻易的旋转,倾斜,缩放任何元素.目前即使没有任何前缀也可以在绝大部分浏览器上很好的使用 . 如果你要在黑莓浏览器或者 UC 浏览器使用这个属性, 你需要加 -webkit- 前缀. #myelement { -webkit-transform: rotate(30deg); transform: rotate(30deg)