当前位置:首页 > 日记 > 正文

常见的变换图形变化的CSS3的总结

常见的变换图形变化的CSS3的总结
1.rotate旋转
旋转画面;单位度;度;意义

CSS代码将内容复制到剪贴板。
-moz变换:旋转(20deg);- WebKit的变换:旋转(20deg);- o-transform:旋转(20deg);- MS变换:旋转(20deg);
2.scale放大和缩小
缩放比例,如1.6放大1.6倍,如果-1.6然后小1.6倍。
CSS代码将内容复制到剪贴板。
WebKit的变换:规模(1.6);-moz变换:规模(1.6);- o-transform:规模(1.6);- MS变换:规模(1.6);

3.translate翻译
转换是一个有两个参数的指定对象的转换,第一个是在x轴的方向上移动,第二个是在y轴的方向上移动。如果第二个参数没有提供,默认值是0。

例如,你需要设置一个元素移动X轴方向和Y轴方向30px 20px当鼠标,可以写成如下:

CSS代码将内容复制到剪贴板。
{ #翻译演示:悬停
WebKit的变换:翻译(30px,20px);
-moz变换:翻译(30px,20px);
- o-transform:翻译(30px,20px);
MS变换:翻译(30px,20px);
变换:平移(30px,20px);
}

必须指出,现代主流浏览器的最新版本(该测试Chrome 22.0.1229.94 17.0.1,Firefox,Safari 5.1.7,Opera 12.12)除了WebKit内核铬和Safari不需要支持变换通过私有财产,而是由现代浏览器在变换属性是由私有财产的支持所需的早,所以为了与早期版本的浏览器兼容,各自的最佳使用私有财产变换在实际的项目中,而不需要向后兼容,并对私有财产的电话。

4.skew倾斜
斜指定元素为倾斜失真,在X轴和Y轴倾斜的元素,带两个参数,对应于x轴的一角、二轴方向的倾斜角与Y。如果不能提供第二参数,默认值是0。Skew是规模有点类似,但规模仅旋转元素,而不改变元素的形状,而斜将改变元件的形状。

例如,需要设置一个X轴的元素,当鼠标悬停在30度以上,Y轴倾斜30度扭转时,就可以写了:

CSS代码将内容复制到剪贴板。
{ #斜演示:悬停
WebKit的变换:斜(30deg,30deg);
-moz变换:斜(30deg,30deg);
- o-transform:斜(30deg,30deg);
MS变换:斜(30deg,30deg);
变换:斜(30deg,30deg);
}

值得注意的是,由于翻译、斜、规模以上是基于X、Y轴的值作为参数,所以为了方便,W3C还提供translatex和translatey,skewx scaleX和scaleY,和skewy,进行独立的X轴和Y轴方向效果设置。

5.matrix矩阵
矩阵是一个矩阵,其中使用3×3矩阵。
属性值是用矩阵表示的吗
是的,除了变换,CSS3和一些属性矩阵作为属性值,事实上,矩阵变换的最基本和最强大的转换值和偏差以及之前介绍过的旋转和缩放在底层的实现是通过矩阵,所以事实上所有的变换值都可以通过一个3×3矩阵。
我们知道,变换的x和y坐标系的二维转换,所以事实上,转型是通过变换方程改变每一点对一个元素的过程,并产生新的坐标值。因此,我们把旧的X和Y坐标,分别xprevcoordsys和yprevcoordsys值,和新的X和Y坐标xnewcoordsys和ynewcoordsys分别。由于变换是在2d进行的,Z坐标值被设置为1,然后我们建立另一个矩阵,矩阵如下所示。
然后,旧的坐标值和新的坐标值与矩阵如下所示:
这是旧的和新的价值观之间的联系可以用矩阵方程,所以开发商只能通过设置矩阵的值写一个自定义的转变。接下来,我们需要注意到,虽然矩阵是一个3×3矩阵,只需要填写实际应用6参数(其他3个无关的X和Y轴),又称为{ A B C D E F }。
例如,以下语句是书面的:
CSS代码将内容复制到剪贴板。
{ #矩阵演示:悬停
WebKit的变换矩阵(1, 1, 0,1, 0, 0);
-moz变换矩阵(1, 1, 0,1, 0, 0);
- o-transform:矩阵(1, 1, 0,1, 0, 0);
- MS变换:矩阵(1, 1, 0,1, 0, 0);
转换:矩阵(1, 1, 0,1, 0, 0);
}

这样,当鼠标悬停时,元素将在Y轴方向拉伸(相当于skewy效果(45deg))。
此外,如果同时使用两个或多个转换方法,则可以合并和写入。

相关文章

PPT2007允许撤销被追踪到150次。

PPT2007允许撤销被追踪到150次。

电脑软件,当使用PowerPoint 2007编辑介绍,如果操作错误,只需点击工具栏中的取消按钮,,和可恢复操作前状态。然而,默认情况下,PowerPoint 2007可以撤销最近20操作。其实,PowerPoint 2007允许用户数可以撤消150次,但你需要进行如下设置:单击Office按钮…

PHP中的特性及其功能

PHP中的特性及其功能

特性,功能,电脑软件,PHP,由于PHP 5.4.0,PHP实现了代码重用的方法,称为特征。 性状是一个丹继成语言类似于PHP代码复用机制。为了减少单继承语言的局限性,特质使开发者自由复用方法在单独的类在不同的层次。性状和类组合的语义定义作为一种方…

PS图象处理软件是如何创造虚假的伪

PS图象处理软件是如何创造虚假的伪

创造,图象,处理软件,虚假,效果,化妆品广告中的虚假伪装效应。它通常是用拉链合成的,给人难以置信的感觉。本教程是关于制作方法的。 很多朋友可能会有这样的化妆品广告印象深刻,欣赏创意和精美的创造者PS图象处理软件技能。事实上,这是广告中…

如何让背景音乐保持多张幻灯片

如何让背景音乐保持多张幻灯片

幻灯片,背景音乐,多张,电脑软件,问题:使用PPT 2007制作幻灯片,从插入;插入标签的声音只在当前幻灯片上工作,背景音乐在下一个播放时停止播放。你能让背景音乐在多张幻灯片中播放吗 答:单击插入选项卡下;;声音的图标,打开插入声音对话框中你需要的…

HTML5画布基本绘图的绘制

HTML5画布基本绘图的绘制

绘制,绘图,电脑软件,它是HTML5中的一个新标签,用于绘制图形。事实上,这个标签与其他标签相同。它的特点是,标签可以得到canvasrenderingcontext2d对象。我们可以通过Javascript脚本控制对象。 它只是一个绘图容器,除了id、类、样式等属性外,还有高度…

连接数据库实例

连接数据库实例

连接数据库,实例,电脑软件,小插曲,晚上改变数据my.ini编码UTF-8,然后数据库已无法启动,回到GBK的变化可以了解问题。 因为它是指向数据库的链接,所以没有什么可以直接解释的。 连接到mysql服务器连接到数据库服务器。 $link = mysqli_conne…

PS图象处理软件基金会:为PS图象处理

PS图象处理软件基金会:为PS图象处理

基金会,图象,处理软件,快速,电脑软件,我们通常说蒙古面具,其实有几种蒙版,我知道四种:一种是快面膜,二是面膜,三是矢量面膜,四是面膜,它们之间的内在联系,我一点也不关心他。 快速蒙版 我只是用它来建立选区,并看到一个例子:在许多皮肤磨削课程,我想…

Javascript会知道(六)删除实例

Javascript会知道(六)删除实例

删除,实例,电脑软件,Javascript,在 在确定左侧的字符串或可转换为字符串的字符是否在右侧。 var数据: 在数据中发出警报( x);true,x是数据的属性。 警报(在数据中);false,数据的属性值。 var arr = {}; / /定义,直接数组对象 警报(ARR); / /真实,会计指标…

使用HTML5画布API在矩形上绘制超级

使用HTML5画布API在矩形上绘制超级

绘制,矩形,电脑软件,API,使用closepath()封闭图形 首先,我们用最常用的方法画一个矩形。 Javascript代码将内容复制到剪贴板。 绘制矩形 你的浏览器不支持画布让我们换一个! 在window.onload =函数(){ VaR的画布document.getelementbyid(画布); canvas…

PS图象处理软件使圆环,萦绕在彼此周

PS图象处理软件使圆环,萦绕在彼此周

圆环,图象,处理软件,电脑软件,PS,今天萧边分享PS图象处理软件联锁环一起缠绵的效果,事实上,这张照片是形象其实很简单,由多个不同颜色的环扣在一起,如何使它看起来在一起。 步 1、打开PS图象处理软件软件建立一个新的画布 操作步骤: (1)打开PS…

插画制作超级可爱香肠艺术字

插画制作超级可爱香肠艺术字

插画,超级可爱,艺术字,电脑软件,萧边今天要分享的超级可爱的香肠当然插画的艺术性生产。这个教程非常好,效果非常好,所以我们将与大家分享。 先看看效果吧。 第一效应图 我想如果没有教程,我认为这真的太好了。 先画香肠的整体外观,20px×50px…

在机器的故障修理,主图书馆binlog,导

在机器的故障修理,主图书馆binlog,导

故障,修理,网络,图书馆,解决方案,对问题的简要描述: 一周前,一个MySQL服务器硬件故障而停了下来。我们向那些在这片收取学生的申请,并负责服务。今天,当服务器修好后,他们开始了服务器上的4个MySQL实例启动后自动启动并开始拉的主要图书馆binlog…