css3-变形transforms

原创 2015年07月09日 14:04:02

语法

 transform: rotate | scale | skew | translate |matrix;

:以往我们叠加效果都是用逗号(“,”)隔开,但transform中使用多个属性时却需要有空格隔开

2D

旋转 rotate(deg)//值为正时顺时针,为负时,逆时针

移动translate(x,y)//若第二参数没写,默认为0

       translateX(x)

       translateY(y)

缩放 scale(x,y)//若第二参数没写,则与第一个相同

        scaleX(x)//缩放基数为1,如果其值大于1元素就放大,反之其值小于1,元素缩小

        scaleY(y)



扭曲 skew(x,y)/第一个参数是水平方向扭曲角度,第二个参数是垂直方向扭曲角度,若第二参数没写,默认为0

       skewX(x)

       skewY(y)


矩阵 matrix,不常用

基点默认为元素的中心点,可以根据transform-origin进行改变基点,只有上面用过transform属性,该属性才能生效(一般在旋转,斜切,缩放中用到)

transform-origin(X,Y):用来设置元素的运动的基点(参照点)。默认点是元素的中心点。

其中X和Y的值可以是百分值,em,px,其中X也可以是字符参数值left,center,right;Y和X一样除了百分值外还可以设置字符值top,center,bottom

 

1、top left | left top 等价于 0 0 | 0% 0%

2、top | top center | center top 等价于 50% 0

3、right top | top right 等价于 100% 0

4、left | left center | center left 等价于 0 50% | 0% 50%

5、center | center center 等价于 50% 50%(默认值)

6、right | right center | center right 等价于 100% 50%

7、bottom left | left bottom 等价于 0 100% | 0% 100%

8、bottom | bottom center | center bottom 等价于 50% 100%

9、bottom right | right bottom 等价于 100% 100%


兼容性



版权声明:本文为博主原创文章,未经博主允许不得转载。

Unity3D 4.3新特性 —— 动画

动画特性 和新的动画窗口见面     受标准关键帧表格的严重影响     只有动画熟悉会在属性试图中显示(窗口左边)     Sprite动画可以通过SpriteRenderer组件实现 ...
  • netcaoniao
  • netcaoniao
  • 2013年11月20日 16:54
  • 2593

基于平均法线实现顶点网格变形控制的总结

基于平均法线实现顶点网格变形控制的总结         顶点网格的变形功能,这在Unity官方商店的技术展示Demo中有一个案例。自己就是在这个案例的基础上进行的学习。案例中的功能全部都是用JS实现的...
  • Haohan_Meng
  • Haohan_Meng
  • 2014年03月31日 07:09
  • 6583

ImageView图片不变形

ImageView的scaleType的属性有好几种,分别是matrix(默认)、center、centerCrop、centerInside、fitCenter、fitEnd、fitStart、fi...
  • chazihong
  • chazihong
  • 2017年08月08日 20:46
  • 520

PHP一句话Webshell变形总结

[笔记]PHP一句话Webshell变形总结 darkray @ WEB安全 2012-10-12 共 10565 人围观,发现 4 个不明物体收藏该文 0×00 前言...
  • test_20140325
  • test_20140325
  • 2014年09月28日 16:42
  • 946

【HTML5】图形变形

canvas // 图形变形 // 1、平移context.translate(x,y) // x:坐标原点向x轴方向平移x // y:坐标原点向y轴方向平移y...
  • newcong0123
  • newcong0123
  • 2016年12月21日 21:47
  • 164

FBX顶点变形目标通道

FBX顶点变形目标通道 本页面的内容: 概述命名设置顶点变形目标导出顶点变形目标导入顶点变形目标 概述 顶点变形目标是已经以某种方式发生变形的特定网格物体的顶点...
  • or7rccl
  • or7rccl
  • 2017年04月25日 23:15
  • 696

CSS3-过渡属性,CSS3-动画

CSS3-过渡属性 transition: property duration timing-function delay; transition-property:过渡属性的名称...
  • EternallyLin
  • EternallyLin
  • 2016年05月22日 12:10
  • 122

ZXing 扫码 图片变形问题

最新项目中ZXing扫码时候图片变形,网上看看了博客问题已解决了出现问题的原因:每部手机中设置了好几组预览图片的尺寸、以及实际图片的尺寸。只有当预览图的尺寸比例和实际图片的比例相同的时候就不会出现变形...
  • tongzhengtong
  • tongzhengtong
  • 2016年07月27日 12:24
  • 1689

一种基于轮廓的自由图像变形算法

一种基于轮廓的自由图像变形算法
  • hahawaterbox
  • hahawaterbox
  • 2015年05月25日 17:15
  • 1596

zxing二维码扫描预览变形的解决方案

在集成zxing二维码时遇到预览拉伸的问题,原因:预览尺寸和surface view不一致。 解决方式: 针对于扫描时,二维码拉伸变形的问题,是因为zxing默认是针对横屏扫描的,所以,我们只需要改变...
  • qq_1991
  • qq_1991
  • 2016年12月16日 16:39
  • 948
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3-变形transforms
举报原因:
原因补充:

(最多只允许输入30个字)