怎样用CSS实现图片翻转

html-css010

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

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

方法一:

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

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

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

方法二:

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

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

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

<div class="wrap">

    <span>文字文字文字</span>

</div> .wrap{

    -webkit-transform:skew(20deg)

}

.wrap span{

    display:inline-block

    -webkit-transform:skew(-20deg)

}

其他浏览器私有前缀自己加,就是外层正度数,内层负度数,度数相等就可以,元素必须是块级元素

使用css实现旋转 rotate

transform:rotate(90deg)

3D旋转可以实现倾斜

transform:rotate3d()

可以先去了解 CSS transform 属性