Transform学习
2D转换
图形变换我们能看到的要么是2D的平面变换,还有就是3D的立体变换,当我们看到这些词的时候,“平移”,“旋转”,“拉伸” 这种都是输入2D变换的范畴,转换导致的结构那就是,位置,形状,尺寸等等的改变。
transform 英文意思“变形” 好像变形金刚也是这个单词我也记不清了,反正transform 就是表述了刚才做说那种2d的转换的几种情况。transform 被 safari chrome firefox ie10 支持,如果在ie下使用需要加上前缀-ms-
translate
这种通常被称为平移就是沿着X Y 坐标,对图形进行移动,一种非常常用的转换
.tf_translate{ transform:translate(500px,500px); }
使用了这个css 那么就是把图像平移到X坐标500px Y左边500px 处
rotate
旋转,图像是以图形的中心为轴的旋转,这个一定要清楚,如果想以指定坐标做旋转的话需要其他做法,
这种旋转是顺时针旋转,可是使用负数,就是逆时针旋转,数值后边请加上deg 这个单位不然是不会正确执行的
.tf_rotate{ transform:rotate(100deg); }
scale
拉伸 沿着X Y 进行拉伸,scale(x,y)两个参数,当然也可以使用scaleX scaleY 进行单独拉伸。
.tf_scale{ transform:scale(1.5,1.5); }
skew
歪斜,这个可能用到的不多,也是两个参数沿着X Y 轴的歪斜 skew(x,y),注意需要加deg 后缀
.tf_skew{ transform:skew(20deg,20deg); }
*origin*
这个效果重点介绍一下,上边讲过rotate 选择只有一个参数代表旋转的角度,只要选择肯定会引申出一个概念就是以什么为圆心选择,在css 和div中是没有其他图形的概念,只有矩形概念所有的块级,行内级都是一个个小小的矩形,这里会有网友疑问,他可以绘制出圆形,或者椭圆,那是你使用了css一些特殊属性,而不是我们使用svg或者canvas 就有标准的图形输出,那么rotate 所有的旋转都是按照这个矩形块的圆心进行旋转。
这就肯定引发一个问题,相当一部分时候我们不是让图形按照中心旋转,例如指定坐标,或者左上角等等,我不知道为什么css3 的transform中设计有origin 这个单独处理图形旋转的接口,如果你大量使用过svg矢量绘图,你会发现transform 中也有rotate 的概念,而且他多了两个参数rotate(deg,x,y),后两个就是指定图形旋转圆心点,下边用图形说明一下origin 的用法
这里重点介绍一下图形1 ,下边原理都是相同,图形是左上顶点标记为0,0,右下点标记为100% 100%,所以这个跟SVG rotate 的用法稍微不同,按照这种规律,你很容易就能找到一个矩形关键的九个点,分别是
(top middle bottom)(left center right)去标 x y 对应的9个点就是
left top (0,0)
center top(50%,0)
right top(100%,0)
right middle(100%,50%)
right bottom(100%,100%)
center bottom(50%,100%)
left bottom(0,100%)
left middle(0,50%)
center middle(50%,50%)
这里有个要注意的,origin 是一定要配合rotate 使用的,不然你只是指定了选择的圆心但是并没有让图形旋转肯定是看不到结果的,
所以这个地方我感觉CSS3 的图形没有svg 设计的更合理,svg 只需要一个接口rotate 就可以指定三个参数实现这个复杂的图形运动。
.tf_origin{ transform-origin:20% 40%; transform:rotate(100deg) }
matrix
这个是上述所有2d变换的汇总,matrix 有六个参数,分别控制平移,歪斜,旋转的所有属性。
.tf_matrix{ transform:matrix(0.866,0.5,-0.5,0.866,0,0); }
上边介绍了所有的2D变换情况,你可以吧这些css应用到你的图像上,会按照你设定值进行图形转换,但是只能看到图形准换的结果。
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变换介绍
css 支持图形以3D的形式进行变换,下边介绍3d变换中用到的方法
rotateX rotateY rotateZ
在2D 变换中rotate() 这种直接加参数的方式是2d中沿着中心进行选择,3D中故名就是按照XYZ轴进行相应的变换,所以你可以看到肯对不可思议的效果。
以上所有的介绍都是图形变形,跟我们在网页上看到的很多效果不同,因为他们使用了很重要的一个属性就是css3中的过渡效果
下一篇介绍过过渡Transition
SVG 对比
以为过去做过一段时间SVG 开发本身SVG 拿出来跟canvas 作对比是比较合适但是CSS3中也有这些概念,所以以下每一篇文章都会拿css3 跟SVG 做一下简单对比,因为时间长不用SVG 其中有些东西可能记得不是特别清楚,如果有错误请指正,
上边所说的所有的图形变换的接口SVG 中都有除了origin 这个,SVG中是跟rotate 合并使用.
1:rotate 的用法不一样具体不一样的地方上边已经介绍过,
2:SVG 没有3D概念
3:css3中3D的图形变换接口更丰富,多出了rotateX ,rotateY ,rotateZ 等接口
相关推荐
css3实现导航动画效果transform及transition css3实现导航动画效果transform及transition
div css3 transform和transition属性鼠标滑过动画效果 div css3 transform和transition属性鼠标滑过动画效果
CSS3的制作动画的三大属性(Transform,Transition,Animation)下面介绍一下 Transition属性。transition属性是一个速记属性有四个属性:transition-property, transition-duration, transition-timing-function, and...
Animate Transition 能够以 12 种预设方式来切换图片,且该插件使用了硬件加速 CSS 转换,所以性能极好。该插件可用于网站外观设计,导航,甚至是移动应用程序中的页面切换。 代码示例: AnimateTransition({ ...
纯css3 transition鼠标悬停图片文字动画显示 纯css3 transition鼠标悬停图片文字动画显示
纯css3 transition动画过渡属性制作鼠标悬停图片标题
<head lang="en"> <meta charset="UTF-8"> <title>... 这是一款基于css3 animation transform属性制作的鱼游动动画特效,用background-position属性实现两条游动追逐的鱼。
jQuery Transit是一款可制作超级平滑的CSS3 transformations 和 transitions动画的jQuery插件。它能够通过jQuery来完成CSS转换和过渡动画效果,这对于一些不支持CSS3转换和过渡属性的浏览器来说是一个非常有用的...
CSS3 transition属性单页模板鼠标悬停导航菜单文字动画
纯CSS3 transition属性鼠标经过酷炫按钮动画特效
css3在原来的基础上增加了变形和动画相关的属性,动画三兄弟:transform、transition和animation,通过使用这三个属性可以达到很炫酷的效果。需要注意的是这三个属性都是css3新增的属性,各大浏览器支持方面还不是...
这是一款使用纯CSS3制作的鼠标hover按钮动画特效。该鼠标hover按钮动画特效共15种不同的效果,分别使用css3 transition在鼠标hover按钮,或点击按钮时制作出炫酷的动画效果。
CSS3 transition动画属性制作鼠标悬停放大图片倾斜效果
css3 transition图文动画显示特效是一款鼠标悬停在图片上动画显示文字描述CSS3特效。
transform: scale();缩放在IE浏览器下会有抖动 transform缩放在IE浏览器下会有抖动 可以在缩放的同时添加一个旋转 如: transform: scale(1.2); 换成: transform: scale(1.2) rotate(0.1deg);...clac是css3
主要介绍了结合 CSS3 transition transform 实现简单的跑马灯效果的示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
CSS3中的Transition属性详解.docx
HTML5+CSS3简单动画效果,涉及到transform、box-shadow、transition等等的基本运用
W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值...
这使得小部分直觉化思维的人(包括我)认为transform属性是动画属性。而恰恰相反,transform属性是静态属性,一旦写到style里面,将会直接显示作用,无任何变化过程。transform的主要用途是用来做元素的特殊变形,...