15年软件开发经验 只做源码定制 互联网+定制化解决方案

15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

当前位置:首页 前端开发 vue/vuex

使用css来设置 图片的镜像翻转

李家霖| 发布于 2021-07-06 22:01:22| 866阅读| 0点赞| 0评论
举报

使用css的transform 属性来完成镜像翻转

要求效果  文字两端均为图片

data:image/png;base64,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

但是只有一张图片

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAATCAYAAAD4f6+NAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAJASURBVEhL7ZP9a41xGMbv669h3udlSSSEZpOiKeVlyfsPYmazsTFjDWOHmb21dpwtbDthtliyvE0IkbeQlIwWyi8SUpf7fr6nds5zzpwfUeeHq+eu5/s89+e+7usrGJHHf0kpoGRKASXTfwKUlk+MKSDSdxJTy4iM3cSkXcTsA0ROA7E8SKw5RaxuI7KPEZnVlLKrlEN3KDUPKYEHRF43Me8wpfkF5ewHyvlBSucApf5JfL8oxQON3EaM3k5MKHIgM/YTU0pdvag2AnOa2HyOWHmSmFtF5Pd4ENL4jBJ6rfV9PddCFPVSej5Trn2j3Pyu9Sei4GJsP58SA5k7E82dPcT0clcbWE4jsaqV2NBBbOlSwOPOnaq7lBOPKcFXlLY3lH03vHfS/tbB3P7lFB4gso7G9vMpOZC5Y+syJ5Y2DQGtO+OtBMuaKUfuUeoUqOUlpek5samTyA1R+r6qMz8cjIHpOe///p5RSg40bofLkU0WDaTOIDNAKb4cC1Ta5yAtT9FA4fdu3f5+Pg0PlF5MTC4hxhYSMyuIhTURoBCxVt2JrFDKrw8BmTvr24kVQUrHuwiQZqf/J6VaczVtb2yvBBo+1OPVGXPHwm1AWQFicZ03PZbUO6DcVkrJFUpFv4OqvOXObL3gOSLdHym9Xyhdg7rGsLu9/n4+xQOZDGqUfpymT7v6NtmsSmK+ZiZbV5ehuZpz0K1go+ZFAVB4yblnTuoNNEek9hGl4akL+QIdKFEvnxID/UWlgJIpBfRn5fE3to2fFuOxMWwAAAAASUVORK5CYII=

这时可以使用css的变形属性transform来进行翻转

css代码

.r{   transform: rotateY(0.5turn);}

给第二张图片单独加上一个属性 transform:rotateY(0.5turn)  这个设置代表的意思是沿着Y轴旋转180度

旋转完成后就是镜像的效果

最终效果:
data:image/png;base64,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

0

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

李家霖
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部