怎样用CSS实现图片翻转

html-css010

怎样用CSS实现图片翻转,第1张

以实现一张图片双面翻转为例：

方法一：

1、实现CSS样式的方法代码如下。

2、实现前端布局的方法代码如下。

3、实现图片翻转CSS样式代码如下。

方法二：

1、实现正反面效果的HTML的方法代码如下。

2、实现CSS样式的方法代码。

3、然后实现竖向翻转的方法代码如下。

使用css实现旋转 rotate

transform:rotate(90deg)

3D旋转可以实现倾斜

transform:rotate3d()

可以先去了解 CSS transform 属性

首先说明一点：目前为止任何利用css来实现不规则边框的方法都是具有很严重的浏览器兼容性的（幸运的是微信小程序是支持的，哈哈），如果你想研究，请搜 css3 clip-path polygon

最兼容也是最简单的方法是直接用一张大图就解决了，最多就是切割一下，只要最终能够拼成一张大图即可。