深圳市金黑网络技术有限公司始终坚持以用户需求为导向，提供安全、稳定、高效的产品和服务！
签到 · 搜索导航 · 服务热线 · 微信/手机：17817817816

深圳网站建设

搜索
应用资源 › 应用开发教程 › 前端教程 › css教程 › css3实现图片旋转代码教程
返回列表 发新帖
查看: 302|回复: 0

css3实现图片旋转代码教程

[复制链接]
admin

UID
1
贡献
844
金币
1540
主题
520
在线时间
333 小时
注册时间
2022-1-15
最后登录
2024-11-12
QQ
发表于 2023-2-1 14:11:20 | 302 | 0 | 显示全部楼层 |阅读模式
admin 2023-2-1 14:11:20 302 0 显示全部楼层
css3实现图片旋转代码教程

一 css实现图片旋转90度

  1. .icon{
  2.   -moz-transform:rotate(-90deg);
  3.   -webkit-transform:rotate(-90deg);
  4. }
复制代码

二 水平翻转

  1. .icon {
  2.     color: #f64e78;
  3.     font-size: 20px;
  4.     display: inline-block;
  5.     -moz-transform:scaleX(-1);
  6.     -webkit-transform:scaleX(-1);
  7.     -o-transform:scaleX(-1);
  8.     transform:scaleX(-1);
  9. }
复制代码

三 垂直翻转

  1. .icon {
  2.     color: #f64e78;
  3.     font-size: 20px;
  4.     display: inline-block;
  5.     -moz-transform:scaleY(-1);
  6.     -webkit-transform:scaleY(-1);
  7.     -o-transform:scaleY(-1);
  8.     transform:scaleY(-1)
  9. }
复制代码
css3教程, css样式
楼主热帖

相关帖子
回复

举报

返回列表 发新帖
Copyright © 2013-2023 深圳市金黑网络技术有限公司 版权所有    备案号：粤ICP备2021124338号    粤公网安备 44030702003689号

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

快速回复 返回顶部 返回列表