本文摘自PHP中文网,作者V,侵删。
要实现镜像翻转,有两种实现方法:
方法一:利用css动画属性rotate旋转来实现
具体代码:
1 2 3 4 5 6 | .mirrorRotateLevel {
transform: rotateY( 180 deg);
}
.mirrorRotateVertical {
transform: rotateX( 180 deg);
}
|
此处,rotateY(180deg) 这里的 Y 表示元素以Y轴镜像翻转,也即水平翻转;同理, rotateX(180deg) 表示以X轴为镜像翻转,即垂直翻转。
(视频教程推荐:css视频教程)
方法二:各个浏览器对镜像翻转的兼容写法来实现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .mirrorRotateLevel {
-moz-transform:scaleX( -1 );
-webkit-transform:scaleX( -1 );
-o-transform:scaleX( -1 );
transform:scaleX( -1 );
filter:FlipH;
}
.mirrorRotateVertical {
-moz-transform:scaleY( -1 );
-webkit-transform:scaleY( -1 );
-o-transform:scaleY( -1 );
transform:scaleY( -1 );
filter:FlipV;
}
|
注意: 镜像翻转和普通旋转不同,镜像翻转以轴为镜像,普通旋转以点为镜像。
阅读剩余部分
相关阅读 >>
3种css使用方法
css如何实现按钮透明
css 首行缩进为什么没有效果
css上边距怎么设置
css怎么改变hr标签颜色
css的属性有哪些
css 布局之两端布局实现
css超出显示滚动条的方法有哪些
css如何实现客服悬浮效果
实现弹幕效果的方法总结(css和canvas)
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 利用css动画属性rotate来实现镜像翻转