php图片镜像翻转,利用css动画属性rotate来实现镜像翻转

要实现镜像翻转，有两种实现方法：

方法一：利用css动画属性rotate旋转来实现

具体代码：.mirrorRotateLevel {

transform: rotateY(180deg); /* 水平镜像翻转 */

}

.mirrorRotateVertical {

transform: rotateX(180deg); /* 垂直镜像翻转 */

}

此处，rotateY(180deg) 这里的 Y 表示元素以Y轴镜像翻转，也即水平翻转；同理， rotateX(180deg) 表示以X轴为镜像翻转，即垂直翻转。

(视频教程推荐：css视频教程)

方法二：各个浏览器对镜像翻转的兼容写法来实现.mirrorRotateLevel { /* 水平镜像翻转 */

-moz-transform:scaleX(-1);

-webkit-transform:scaleX(-1);

-o-transform:scaleX(-1);

transform:scaleX(-1);

/*兼容IE*/

filter:FlipH;

}

.mirrorRotateVertical { /* 垂直镜像翻转 */

-moz-transform:scaleY(-1);

-webkit-transform:scaleY(-1);

-o-transform:scaleY(-1);

transform:scaleY(-1);

/*兼容IE*/

filter:FlipV;

}

注意：镜像翻转和普通旋转不同，镜像翻转以轴为镜像，普通旋转以点为镜像。

HTML部分代码：

测试CSS3下镜像翻转

测试CSS3下水平镜像翻转

测试CSS3下垂直镜像翻转

我们来看一下简单的效果：

(感兴趣的同学可以将文字换成图片)

php图片镜像翻转,利用css动画属性rotate来实现镜像翻转相关推荐

镜像css3,利用css动画属性rotate来实现镜像翻转_WEB前端开发
layui中使用的一些弹出框_WEB前端开发 Layui是一款采用自身模块规范编写的情怀型前端UI框架,本文就来为大家介绍一下layui中使用的一些弹出框,希望对大家有一定的帮助. 要实现镜像翻转,有 ...
利用css transition属性实现一个带动画显隐的微信小程序部件
我们先来看效果图像这样的一个带过渡效果的小部件在我们实际开发中的应用几率还是比较大的,但是在开发微信小程序的过程中可能有的小伙伴发现transition这个属性它不好使(下面说明)所以我们这个时候会 ...
利用css 动画实现节流
节流指的避免过于频繁的执行一个函数,例如:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,不然会频繁的请求接口,之前基本上是通过js去控制节流问题,其实css也能做到节流 ...
html列表太多转为下滑菜单,利用CSS过渡属性Transition制作缓缓弹出的纯CSS下拉菜单...
利用CSS过渡属性Transition制作缓缓弹出的纯CSS下拉菜单以往文章里面讲了使用CSS的position属性定位结合display制作下拉弹出菜单,名为<纯CSS制作下拉导航菜单> ...
html的动画属性,css动画属性使用及实例代码(transition/transform/animation)
在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...
利用CSS3动画属性实现轮播图切换图片时出现附近内容抖动的解决办法。
利用CSS的动画完成轮播图功能,切换图片时发现,在QQ浏览器上轮播图切图时会影响附近内容抖动导致看起来模糊. 如下图: 轮播图切图时下面的内容:"办公家具"."更多&qu ...
利用css动画实现打字机效果
简言通过使用css的animation(动画属性)实现文字显示的打字机效果. 单行思路实现步骤: 将文本框属性设置为等宽字体,计算文本框的字数,设置文字大小.相对布局等. 将文本框隐藏,通过动画 ...
利用CSS动画制作 Html 表格数据滚动显示
直接上图看最终实现效果: DataV里有这个效果,看起来高大上,实际自己开发也不难实现.实现的方法很多,下面是本人的一种实现方案,分享给大家. 这个效果需要解决2个问题: 1:首尾的数据衔接: 2:c ...
在html5中关键帧属性的描述,CSS动画属性关键帧keyframes全解析
大概有多久没有更新专栏文章了.半年?下半年忙到起飞,或者毫不夸张的说是发射?仅有的一点个人时间,上半年贡献给了Python,现在差不多已忘掉了七七八八(一首<凉凉>送给自己),下半年贡献给 ...

php图片镜像翻转,利用css动画属性rotate来实现镜像翻转

php图片镜像翻转,利用css动画属性rotate来实现镜像翻转相关推荐

最新文章

热门文章