怎样用CSS实现图片翻转

html-css042

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

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

方法一:

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

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

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

方法二:

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

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

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

首先创建一个div元素容纳文本信息(可以包含更多元素),class取名为“狗耳朵”也就是卷角的意思:

.dog-eared-tip{

padding: 7.5px 5px 7.5px 20px

background: #DEAA2F

font-size: 13px

position: absolute

text-align: center

width: 100%

color: black

}