图片转起来的css样式,css图片转动

css网页中图片旋转90度 并适应div

代码如下：

!DOCTYPE html

html

head

titleCSS3旋转图片/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="" alt="Flowers" style="width:200px;"

90°旋转后的图片

img src="" alt="Flowers" style='width:200px;transform:rotate(90deg)'

/body

/html

代码呈现的结果如下图：

扩展资料

CSS图片旋转注意事项

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

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

相关问答

Q1: 如何用CSS样式实现图片交换

一段文字，当鼠标在文字上面单击，文字消失，原来文字的地方却立即变成了一张图片，当鼠标在图片上单击，图片又消失，原来的文字又重现了，像变魔术一样，是不是有意思?!这种效果用Dreamweaver的Behavirs 功能也可实现，但那要增加一段Javascript程序，明显增加了不少代码。而用CSS来制作这种效果，增加的代码却要少得多。 原理:利用CSS的属性值可动态改变的特点。 思路:定义一个HTML元素CSS属性的两种属性值，再用一个事件来触发，一旦事件发生，则改变HTML元素的属性值，从而达到预期目的。 制作方法: 1、在网页中输入一段文字，用“Span”标记把它括起来，并给它加一个CSS的“ID”属性(也就是给这段文字编一个代号，如:“Text1”，以便识别);再插入一张图片，同样也用“Span”把它括起来，也给它加一个“ID”属性，如:ID="image1"; 2、在网页源代码的〈head〉与〈/head〉之间加上下面这段CSS代码: 〈style type="text/css"〉 〈!-- .style1 { position:absolute; top: 200px; left:180px; background-color:#ccccff; visibility:hidden} .style2 { position:absolute; top: 200px; left:180px; background-color:#ccccff; } .style3 { position:absolute; top: 190px; left:180px; visibility:hidden} .style4 { position:absolute; top: 190px; left:180px; } --〉 〈/style〉 上述代码中的“top”、“left”的值用于定位文本和图片在网页中位置，“backgroud-color”用于确定文本的背景颜色，这些属性值要根据实际情况修改。visibility是决定当前对象是否显示的CSS属性，本例就是动态地改变这个属性值来达到效果的; 3、在“Text1 ”的那个“span”中加载CSS的“.style2”，让那段文本一开始是显示的，并再加载一个“onclick”触发事件，一旦这个事件发生，将做两件事，一是让“Text1”采用CSS的“.style1”，把文本隐藏;二是让“image1”采用CSS的“.style4”，让图象显示。这样，“Text1”及那段文本的代码是这样的:〈span id="text1" class="style2"〉〈font color="#0000FF"〉鼠标在这段文字上单击，文字消失变为图象。在图象上单击，图象消失，恢复为文字。〈/font〉 4、同样在“image1 ”的那个“span”中加载CSS的“.style3”，让那张图片一开始是隐藏的，并再加载一个“onclick”触发事件，一旦这个事件发生，将做两件事，一是让“Text1”采用CSS的“.style2”，把文本显示;二是让“image1”采用CSS的“.style3”，让图象隐藏。这样，“image1”及那张图片的代码是这样的: 〈span id="image1" class="style3"〉〈img src=" " width="316" height="26"〉〈/span〉 上面代码中“img”中的代码在实际制作中将随插入图片的不同而改变。

Q2: 网页设计中怎么实现图片旋转

css3 的transform属性允许我们旋转、缩放和移动元素。 可以通过给它传递一个 rotate(度数) 值来旋转一个元素，正值表示顺时针方向旋转，负值表示逆时针方向旋转，旋转的中心点为元素的中心。

CSS代码如下：

.rotate{

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

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

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

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

}

浏览器支持：Firefox 4+、Oprea 10+、Safari 3.1+、Chrome 8+、IE 9+

Q3: 怎样用CSS实现图片翻转

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

方法一：

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

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

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

方法二：

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

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

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

Q4: 求教：如何用CSS样式 将背景图 旋转

div

{

transform:rotate(9deg);

-ms-transform:rotate(9deg); /* Internet Explorer */

-moz-transform:rotate(9deg); /* Firefox */

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

}

这是css3 的2d转换 确实能实现将背景图旋转。（9deg是选择角度 自己调整）

但是！ 他会把div里面的所有内容都旋转掉(如果里面有文字或者其他也都会被影响而旋转)！