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
  • 4869

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

在CSS3中,可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理,本文将对此做详细介绍。 一.旋转 rotate 用法:transform: rot...
  • MOONCOM
  • MOONCOM
  • 2017年01月17日 14:26
  • 2462

SVG小记——transform属性,建立新视窗

transform属性值有效地SVG变换有:旋转rotate, 缩放scale, 移动translate, 和倾斜skew。 坐标系变化 transform属性被定义成两个在被添加的元素上建立新用...
  • leo8729
  • leo8729
  • 2015年10月08日 11:11
  • 412

Transform-style和Perspective属性

在《CSS3 Transform——transform-origin》一文中主要介绍了CSS3 Transform属性中的transform-origin属性的使用,其实在transform属性中,t...
  • mychirs
  • mychirs
  • 2014年09月25日 10:12
  • 464

IOS UI transform 属性

本节重点: 理解 transform 属性  .  通过 transform  属性 可以对控件进行位移 缩放 扩大 旋转 的操作  CGAffineTransform CGAffine...

Transform-style和Perspective属性

在《CSS3 Transform——transform-origin》一文中主要介绍了CSS3 Transform属性中的transform-origin属性的使用,其实在transform属性中,t...
  • krzover
  • krzover
  • 2017年03月22日 11:05
  • 145

CSS3中动画效果新属性----transition&transform

W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,...

CSS3 transform 属性

实例 旋转 div 元素: div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transfo...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:transform的一些属性
举报原因:
原因补充:

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