怎样用CSS实现图片翻转

html-css017

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

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

方法一：

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

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

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

方法二：

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

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

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

使用CSS3 transform 属性设置元素旋转。

定义和用法

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

语法：transform: none|transform-functions

可能值

实例 旋转 div 元素：

div

{

transform:rotate(7deg)

-ms-transform:rotate(7deg) /* IE 9 */

-moz-transform:rotate(7deg) /* Firefox */

-webkit-transform:rotate(7deg) /* Safari 和 Chrome */

-o-transform:rotate(7deg) /* Opera */

}

浏览器支持　

      Internet Explorer 10、Firefox、Opera 支持 transform 属性。

Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。

Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。

Opera 只支持 2D 转换。

代码如下：

<!DOCTYPE html>

<html>

<head>

<title>CSS3旋转图片</title>

<style>

demo {

width: 100px

height: 75px

background-color: yellow

border: 1px solid black

margin:20px

}

#div2 {

transform: rotate(30deg)

-ms-transform: rotate(30deg)/* IE 9 */

-moz-transform: rotate(30deg)/* Firefox */

-webkit-transform: rotate(30deg)/* Safari and Chrome */

-o-transform: rotate(30deg)/* Opera */

}

#div3 {

transform: rotate(90deg)

ms-transform: rotate(90deg)/* IE 9 */

moz-transform: rotate(90deg)/* Firefox */

webkit-transform: rotate(90deg)/* Safari and Chrome */

o-transform: rotate(90deg)/* Opera */

}

</style>

</head>

<body>

<div class="demo" id="div1">你好。这是一个 div 元素。</div>

<div style="clear:both"></div>

<div class="demo" id="div2">你好。这是一个 div 元素。</div>

<div style="clear:both"></div>

<div class="demo" id="div3">你好。这是一个 div 元素。</div>

原图<img src="http://www.baidu.com/img/bd_logo1.png" alt="Flowers" style="width:200px">

90°旋转后的图片

<img src="http://www.baidu.com/img/bd_logo1.png" alt="Flowers" style='width:200pxtransform:rotate(90deg)'>

</body>

</html>

代码呈现的结果如下图：

扩展资料

CSS图片旋转注意事项

1、图片的旋转可以说是一种效果，但是逐渐的，旋转已经不单单是属于视觉效果那个范畴，其更具有使用性，功能性。我们都知道，照片有时候是需要横过来的拍的，当我们预览或共享到web上时需要进行旋转。

2、这个操作在以往可能更多的是交给软件去完成，然后再将旋转到正常角度的图片发布到web上。但是，现在直接就可以在web上对图片进行旋转之类的处理，就算图片处理软件再怎么方便好用，也不及直接发布时对图片做调整来的方便。这就是图片旋转功能的实用意义。我们可以在新浪微博上见到这种图片旋转的功能。