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和transition属性制作扇形导航

在前面,我们已经讲解了transform这个属性以及案例,那么本文会进一步结合transform和transition两个属性,并制作一个简单的案例进行说明。 一、transition属性说明 接下来...

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

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

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

Transform-style和Perspective属性

在《CSS3 Transform——transform-origin》一文中主要介绍了CSS3 Transform属性中的transform-origin属性的使用,其实在transform属性中,t...

IOS UI transform 属性

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

Transform-style和Perspective属性

在《CSS3 Transform——transform-origin》一文中主要介绍了CSS3 Transform属性中的transform-origin属性的使用,其实在transform属性中,t...

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

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

CSS3 transform 属性

实例 旋转 div 元素: div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transfo...

[IOS]今天开始学UI---UIIView的transform和contentMode属性

UIView transform和contentMode属性
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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