transform的一些属性

原创 2016年08月30日 16:14:54
.div1{transform: rotate(45deg)}
.div1 span{transform: rotate(45deg);display: inline-block}
.div2{transform:scale(0.5,1)}
.div3{transform:skew(30deg,20deg)}
.div4{transform:translate(45px,50px)}
.div5{transform:rotate(45deg) scale(0.5) skew(30deg,30deg) translate(100px,100px)}
.div6:hover{transition:2s; -moz-transform:scaleX(-1); -webkit-transform:scaleX(-1);-o-transform:scaleX(-1);transform:scaleX(-1);filter:FlipH();}
/*.div6{transition:width 2s;}

transform:
rotate属性 旋转 默认顺时针旋转
scale属性 缩放
skew属性 倾斜
translate属性 移动
transition:过渡的时间

一个例子:

.top{width:240px;height:135px;overflow: hidden;border:1px solid #ccc;}
.top img{max-width: 100%;height: auto;-webkit-transition: all ease-out 1s; transition: all 1s;}
.top img:hover{-webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1);} 

<div class="top">
<img src="">
</div>
版权声明:本文为博主原创文章,未经博主允许不得转载。

CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

一.旋转 rotate 用法:transform: rotate(45deg); 共一个参数“角度”,单位deg为度的意思,正数为顺时针旋转,负数为逆时针旋转,上述代码作用是顺时针旋转45...
  • er_ba
  • er_ba
  • 2015年07月26日 00:07
  • 6456

CSS3 transform介绍|如何设计炫酷的动画效果

CSS里transform变形这个属性有点学习难度,尤其在CSS3里加上了3D效果之后,2维变3维学习成本更是成倍提高。为什么设计师的眼里饱含着泪水,因为对页面效果爱的深沉。本篇就介绍一下transf...
  • yeana1
  • yeana1
  • 2016年07月08日 15:44
  • 3393

数字电路中时钟抖动 Jitter 和 偏移 Skew

系统时序设计中对时钟信号的要求是非常严格的,因为我们所有的时序计算都是以恒定的时钟信号为基准。但实际中时钟信号往往不可能总是那么完美,会出现抖动(Jitter)和偏移(Skew)问题。 所谓...
  • wordwarwordwar
  • wordwarwordwar
  • 2016年11月21日 23:51
  • 2613

基于CSS3实现的transform属性相册图片墙源码

  • 2015年08月27日 15:22
  • 92KB
  • 下载

javascript 旋转时钟 使用rotate属性 transform 兼容版本

  • 2013年07月23日 19:22
  • 565KB
  • 下载

transform 属性之 matrix 方法其一

本文重点是 transform 属性的 matrix 方法,会介绍 matrix 方法的转换原理,以及用 matrix 来实现 translate 和 scale。...
  • u011848617
  • u011848617
  • 2017年12月28日 22:20
  • 38

25-UI基础通过控件的 transform 属性,对控件进行移动,缩放,旋转操作,(补充简单动画)

通过控件的 transform 属性,对控件进行移动,缩放,旋转操作,(补充简单动画) @interface ViewController () //头像的属性 @p...
  • good_sister
  • good_sister
  • 2014年12月26日 23:48
  • 303

关于CSS3中transform属性对元素布局的影响。

今天了解transform属性时发现一个奇怪的现象,就是使用transform属性的时候,无论是translate,rotate,skew还是scale,对于伪元素:after和:before,都会产...
  • C860_zy
  • C860_zy
  • 2013年12月26日 23:44
  • 2496

CSS3动画的属性主要分为三类:transform、transition以及animation。

Transform:(css3 2D 转换) 注意:这些效果叠加时,中间用空格隔开 作用:能够对元素进行移动、缩放、转动、拉长、拉伸 转换:使元素改变形状、尺寸、位置的一种效果 Trans...
  • fan_xiao0529
  • fan_xiao0529
  • 2017年03月06日 10:33
  • 250

UIView的transform属性及使用案例

transform属性作用:给我们的控件做一些形变,(平移,缩放,旋转)移动// 平移 //每次移动都是相对于上次位置 _redView.transform = CGAffineTransformT...
  • xxxxLee
  • xxxxLee
  • 2016年01月26日 23:45
  • 1731
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:transform的一些属性
举报原因:
原因补充:

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