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

html-css010

网页设计中怎么实现图片旋转,第1张

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+

图片旋转可以用CSS3中的动画效果来做,CSS3中,允许使用 3D 转换来对元素进行格式化。

示例代码如下:

<style>

*{margin:0padding:0}/*简单可以自定义,参照上面*/

body{font:14px/1.5 "\5FAE\8F6F\96C5\9ED1","\5B8B\4F53", sans-serif, Arial, Systembackground-color:#FFF}

#imgg{animation:imgg 1s linear 0s infinite}

@keyframes imgg{0% {transform:rotateY(0deg)}25%{transform:rotateY(90deg)}50%{transform:rotateY(180deg)}75%{transform:rotateY(270deg)}100% {transform:rotateY(360deg)}}

</style>

<div id="demo">

<img src="图片地址" alt="" width="100" height="100" id="imgg">

</div>