transform的一些属性

.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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值