关于css3图片旋转transform:rotate()问题总结

前两天做了一个关于贺卡制作的项目,项目要求上传图片 ,图片旋转,播放音乐等几个特效,今天讲讲图片旋转的问题,

css3属性中有一个transform:rotate();大家最好写-webkit-transform:rotate();-moz-transform:rotate();这样

控制好样式之后要控制像发微博图片那样点击就旋转多少度的html代码,javascript代码

<div id="rotate">旋转按钮</div>

<img src="" id="picbox" />

<script>

  var rotateindex = 1;

  $("#rotate").click(function(event){

    var deg = rotateindex*4/90+‘deg‘;

    $(".picbox").css(‘transform‘,‘rotate(‘+deg+‘)‘)

    rotateindex++;

    if(rotateindex>4){

      rotateindex=1;

    }

  })

</script>

时间: 2024-10-01 03:22:36

关于css3图片旋转transform:rotate()问题总结的相关文章

CSS3 2D 转换【旋转transform:rotate(30deg); 移动transform: translate(50px,100px); 放大缩小transform:scale(2,4)】

CSS3 2D 转换 CSS3 转换 CSS3转换,我们可以移动,比例化,反过来,旋转,和拉伸元素. 它是如何工作? 变换的效果,让某个元素改变形状,大小和位置. 您可以转换您使用2D或3D元素. 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号. 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号. Property           transform 36.0 4.0 -webkit- 10.0 9.0 -ms- 16.0 3.5

CSS3图片旋转特效

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> p#socialicons img { /* 1st set of icons. Rotate them 360deg onmouseover and out */ -moz-tran

css3图片旋转

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>css3实现社交图标旋转效果</title> </head> <style> #container { width: 960

CSS3 图片旋转

.nav_all { position:relative; z-index:10001; width:172px; display:inline; float:left; *zoom:1; } .nav_all b { display:block; font-size:16px; text-align:left; color:#fff; padding:0 15px; height:46px; line-height:46px; background:#f90; } .nav_all b i {

纯css3图片旋转展示

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ background: lightblue; } div.box{ /*position: absolute;*/ width: 200px; height: 300px; /*left:

HTML5+CSS3 animation/keyframe/transform/transition/2D translate/3D translate 学习总结

<h1>HTML5+CSS3 animation/keyframe/transform/transition/2D translate/3D translate 学习总结</h1> <h1>HTML5,animation,keyframe,transform,transition,2D translate,3D translate,CSS3</h1> CSS3 教程 CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. 本教程向您讲解 CS

CSS3的变形transform、过渡transition、动画animation学习

学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.-ms-.-o-),本文为简化内容,直接使用了原版属性 根据不同属性的支持度,在实际使用的时候需要添加相应的浏览器前缀支持 目录: 变形transform 过渡transition 动画animation 一.变形transform 变形有rotate旋转.scale缩放.translate位移.sk

IE下及标准浏览器下的图片旋转(一)——滤镜,CSS3

关于图片的旋转,一般来说有3种解决方案:(1)滤镜 (2)css3 (3)canvas.接下来逐一讲解. 为了方便理解,我们主要以90度整倍数讲解,兼顾其他角度. 1. 滤镜(IE专属) 1.1 旋转滤镜 语法如下: filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=i); rotation取值0(0或360度),1(90度),2(180度),3(270度).取其他数无效. 旋转90度示例: css: #box {     

css3 实现图片旋转

今天发现一个很好玩的css特效,将鼠标放到图片上,图片会像黑胶唱片一样旋转,类似于虾米专辑封面的特效,特别适用于图片列表的展示,下面是列子代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3