CSS3只让背景图片旋转180度的实现示例


Posted in HTML / CSS onMarch 09, 2021

一、心路历程

最近写驾驶舱的时候琢磨了一个问题,就是单纯的使背景图片旋转的一定的角度。

只通过CSS3的transfrom让整个容器都翻转了一定的角度,达不到我想要的效果。

然后通过研究和参考相关文章总算实现了这个效果,话不多说,上代码。

二、代码实现

HTML模板如下

<div class="smart_development_right">
  <div class="smart_development_content">
    <span>智能感知设备</span>
  </div>
  <div class="smart_development_content">
    <span>在线率</span>
  </div>
</div>

CSS代码

.smart_development_right{
   position: relative;
   overflow: hidden; 
}
.wisdomGongdi .gongdi_center .center_top .smart_development_right::before {
  content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background: url('/public/smart_equipment.png') 0 0 no-repeat;
    transform: rotate(180deg);
}

如果希望向右旋转90度 就把上面代码中的180deg改成90deg

如果希望向左旋转90度 就把上面代码中的180deg改成-90deg

如果思路走的对,那么实现起来就会非常简单。

虽然最后没有用上这个,但还是觉得特别有用,所以跟大家分析一下。

参考文献

到此这篇关于CSS3只让背景图片旋转180度的实现示例的文章就介绍到这了,更多相关CSS3 背景图片旋转180度内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3中文字镂空、透明值、阴影效果设置示例小结
Mar 07 HTML / CSS
css3实现冲击波效果的示例代码
Jan 11 HTML / CSS
css3实现动画的三种方式
Aug 24 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
Feb 24 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
Jul 05 HTML / CSS
HTML5实现的震撼3D焦点图动画的示例代码
Sep 26 HTML / CSS
HTML5上传文件显示进度的实现代码
Aug 30 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
Mar 25 HTML / CSS
canvas如何实现多张图片编辑的图片编辑器
Mar 10 HTML / CSS
css3实现背景图片半透明内容不透明的方法示例
Apr 13 HTML / CSS
html+css实现环绕倒影加载特效
Jul 07 HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
Aug 14 HTML / CSS
CSS3 真的会替代 SCSS 吗
Mar 09 #HTML / CSS
css3实现书本翻页效果的示例代码
Mar 08 #HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
Mar 08 #HTML / CSS
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
Mar 05 #HTML / CSS
详解利用css3的var()实现运行时改变scss的变量值
Mar 02 #HTML / CSS
从一次项目重构说起CSS3自定义变量在项目的使用方法
Mar 01 #HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
Feb 24 #HTML / CSS
You might like
地摊中国 - 珍藏老照片
2020/08/18 杂记
在php MYSQL中插入当前时间
2008/04/06 PHP
PHP高自定义性安全验证码代码
2011/11/27 PHP
php socket实现的聊天室代码分享
2014/08/16 PHP
php猜单词游戏
2015/09/29 PHP
php bootstrap实现简单登录
2016/03/08 PHP
PHP+mysql实现的三级联动菜单功能示例
2019/02/15 PHP
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
2013/07/10 Javascript
JS 获取浏览器和屏幕宽高等信息代码
2014/03/31 Javascript
javascript实现画不相交的圆
2015/04/07 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
基于jquery实现省市联动特效
2015/12/17 Javascript
Bootstrap 布局组件(全)
2016/07/18 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
基于vue实现分页效果
2017/11/06 Javascript
解决linux下node.js全局模块找不到的问题
2018/05/15 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
2018/06/26 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
JSON获取属性值方法代码实例
2020/06/30 Javascript
vue 避免变量赋值后双向绑定的操作
2020/11/07 Javascript
Python中使用asyncio 封装文件读写
2016/09/11 Python
Python找出最小的K个数实例代码
2018/01/04 Python
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
python无限生成不重复(字母,数字,字符)组合的方法
2018/12/04 Python
对Python信号处理模块signal详解
2019/01/09 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
python 写一个水果忍者游戏
2021/01/13 Python
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
2015/04/24 HTML / CSS
CSS3自定义滚动条样式的示例代码
2017/08/21 HTML / CSS
草莓网美国官网:Strawberrynet USA
2016/12/11 全球购物
实体的生命周期
2013/08/31 面试题
工程地质勘察专业大学生求职信
2013/10/13 职场文书
记帐员岗位责任制
2014/02/08 职场文书
合作协议书模板2014
2014/09/26 职场文书
社区好人好事材料
2014/12/26 职场文书