2然后在上方的head标签中的style标签设置样式，这里设置图片的宽度和高度并设置相对定位，然后设置图片的鼠标悬浮样式，其中设置动画的形式为3d以及设置图片3d旋转偏移的角度，添加一个动画，设置好延时即可3最后打开浏览器。

1首先准备一个HTML文档，文档中准备好两个图片，接下来会对这两个图片进行旋转2然后对HTML中的内容定义一些样式，如下图所示，主要是标题以及ul的样式3接下来就给图片所在的li定义宽高，如下图所示4然后给。

lt！doctype html 旋转 margin0 padding0 border0 div width200px height200px marginleft100px margintop100px img width200px height200px borderradius100px animation。

这个只用css不能完全实现，的配合js的定时器来完成，下面是代码lt！DOCTYPE html HTML5 imgwidth 200px div1width 200pxheight 200pxborder1px solid #000margin 150px。

要在CSS中创建一个上升动画，并设置x轴外旋，您可以使用`transform`属性来控制元素的位置和旋转下面是一个基本的示例```css@keyframesrisinganimation0%transformtranslateY0rotate0deg100%transform。

* css3 让一个图片不断翻转示例代码 *#gavinPlay* backgroundcolor url x y repeat 图片来自百度图片，按需要更换 *backgroundred urlquot。

filterprogidrotation=1上面代码前三行是css3，第四行是ie滤镜的简单的90度的整数倍旋转方式，更加复杂的度数要用矩阵，需要的话可以查查资料 注左旋把90改为90，rotation=1改。

代码如下lt！DOCTYPE html CSS3旋转图片 demo width 100pxheight 75pxbackgroundcolor yellowborder 1px solid blackmargin20px div2 transform rotate30degmstransform rotate30deg。

新建一个HTML文件粘过去2D 旋转 3D 旋转 p margin 12px 0 0 0lineheight 150% rotate1， #rotatey1 border 1px solid #000000background redmargin 10pxopacity 0。

下面是用css旋转图片，用js换className换图片地址后试试cssturn0 moztransformmatrix1，0，0，1，0，0 otransformmatrix1，0，0，1，0，0 webkittransformmatrix1，0，0，1，0，0。

使用transformrotate180deg要将CSS中的背景图片旋转180度，可以使用transformrotate180deg属性，这会将背景图片旋转半圈，使其颠倒。

css3 翻转和旋转的区别如下概述css3中的transform中有旋转，放缩，倾斜，平移的功能，分别对应的属性是rotate，scale，skew，translate 1旋转，利用rotate来实现，代码如下webkittransformrotate10deg 指定浏览。