这篇博客介绍了如何使用CSS来实现图像的旋转和翻转效果。第一部分展示了如何通过`transform: rotate(-90deg)`将图片旋转90度。第二部分则讲解了如何利用`transform: scaleX(-1)`进行水平翻转，而第三部分则是通过`transform: scaleY(-1)`实现垂直翻转。这些技巧在前端开发中常用于创建动态和响应式的网页元素。
一 css实现图片旋转90度
.icon{
-moz-transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
}
二 水平翻转
.icon {
color: #f64e78;
font-size: 20px;
display: inline-block;
-moz-transform:scaleX(-1);
-webkit-transform:scaleX(-1);
-o-transform:scaleX(-1);
transform:scaleX(-1);
}
三 垂直翻转
.icon {
color: #f64e78;
font-size: 20px;
display: inline-block;
-moz-transform:scaleY(-1);
-webkit-transform:scaleY(-1);
-o-transform:scaleY(-1);
transform:scaleY(-1)
}
四 效果图
7189
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
