谈谈CSS3中transfrom,鼠标移入图片动态提示效果

1.定义和用法

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

2 transform的常见属性有哪些?

transform的属性包括: translate()/rotate() / skew() / scale() /,分别还有x、y之分,比如:rotatex() 和 rotatey() ,以此类推。

transform:translate()

含义:变动,位移;例如向右位移20像素,向上位移50像素(向左向下为负值) 实例如下

.test01{-webkit-transform:translate(20px,50px);-moz-transform:translate(20px,50px)}

transform:rotate()

含义:旋转;“deg”是表示旋转的度数 例如“180deg”表示旋转“180度”  实例如下

.test02{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg)}

transform:skew()

含义:倾斜  实例如下

.test03{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)} 

transform:scale()

含义:比例  1.8表示以1.8的比例放大 如果是放大整数倍如放大3倍 必须写成3.0  实例如下

.test03{-webkit-transform:scale(2.5);-moz-transform:scale(2.5)}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

你认识小汐吗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值