广告位联系
返回顶部
分享到

css实现图片旋转功能的代码

css 来源:互联网 作者:佚名 发布时间:2025-02-11 21:03:28 人浏览
摘要

一 css实现图片旋转90度 1 2 3 4 .icon{ -moz-transform:rotate(-90deg); -webkit-transform:rotate(-90deg); } 二 水平翻转 1 2 3 4 5 6 7 8 9 .icon { color: #f64e78; font-size: 20px; display: inline-block; -moz-transform:scaleX(-1); -webkit-tra

一 css实现图片旋转90度

1

2

3

4

.icon{

  -moz-transform:rotate(-90deg);

  -webkit-transform:rotate(-90deg);

}

 二 水平翻转

1

2

3

4

5

6

7

8

9

.icon {

    color: #f64e78;

    font-size: 20px;

    display: inline-block;

    -moz-transform:scaleX(-1);

    -webkit-transform:scaleX(-1);

    -o-transform:scaleX(-1);

    transform:scaleX(-1);

}

三 垂直翻转

1

2

3

4

5

6

7

8

9

.icon {

    color: #f64e78;

    font-size: 20px;

    display: inline-block;

    -moz-transform:scaleY(-1);

    -webkit-transform:scaleY(-1);

    -o-transform:scaleY(-1);

    transform:scaleY(-1)

}

四 效果图


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 :
相关文章
  • css grid网格布局(栅格布局)的代码

    css grid网格布局(栅格布局)的代码
    CSS中gap并不是新的属性,在CSS3新特性中多列布局为其添加了一个新能力。间隙属性除了运用在CSS栅格之外,CSS3新特性中弹性布局同样可以使
  • css实现图片旋转功能的代码

    css实现图片旋转功能的代码
    一 css实现图片旋转90度 1 2 3 4 .icon{ -moz-transform:rotate(-90deg); -webkit-transform:rotate(-90deg); } 二 水平翻转 1 2 3 4 5 6 7 8 9 .icon { color: #f64e78; font-size
  • CSS自定义浏览器滚动条样式的代码
    CSS自定义浏览器滚动条样式指南 在现代网页设计中,细节决定成败。滚动条作为用户与页面交互的重要组成部分,其样式往往被忽视。本文
  • CSS background-size属性介绍
    background-size是 CSS 中一个非常重要的属性,用于控制元素背景图片的尺寸。通过设置background-size,开发者可以根据布局需求,灵活地调整背景
  • CSS border边框的全面指南介绍
    CSS 是前端开发中不可或缺的工具,而border属性则是控制元素边框的核心之一。通过灵活使用border,开发者可以为网页布局带来丰富的视觉效
  • CSS中隐藏滚动条的同时保留滚动功能
    在CSS中,我们可以通过一些技巧来隐藏滚动条,同时保留滚动功能。以下是几种常用的方法和具体的实现步骤。 1. 使用overflow和::-webkit-scr
  • CSS布局技巧实现元素左右排列的方法

    CSS布局技巧实现元素左右排列的方法
    开发中经常会遇到一个场景,使用 CSS 实现一个子元素靠右,其余子元素靠左。 这里总结一下常见的实现方式。 1. flex 布局 flexbox 是一种常
  • CSS给div一个带有圆角的渐变边框效果

    CSS给div一个带有圆角的渐变边框效果
    单纯的设置border-radius,是不行的,这样设置完以后渐变色边框虽然会显示,但是圆角不能出来,解决方法如下 1.先看效果 2.这是个带有渐变效
  • CSS Grid 布局在IE中不兼容的原因及解决方案
    CSS Grid 布局在 IE 中不兼容的原因与解决方案 1. 引言 在现代Web开发中,CSS Grid布局作为一种强大的二维布局系统,为开发者提供了灵活且高效
  • 使用CSS的object-position实现图片在img标签中的定位

    使用CSS的object-position实现图片在img标签中的定位
    在CSS中,object-position属性它允许我们精确地控制替换元素(如img、video等)内容在其容器内的位置。通过指定水平和垂直方向的偏移量,可以
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计