精华内容
下载资源
问答
  • CSS 图片旋转

    千次阅读 2016-12-11 11:58:04
    *" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <head><title>图片旋转-郭峰</title><meta http-equiv="pragma" content=
    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    
    <title>图片旋转</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <style>
    .logo {
    	text-align: center;
    	margin-top: 100px;
    }
    
    @-webkit-keyframes rotation {
    	from {-webkit-transform: rotate(0deg);
    }to {
    	-webkit-transform: rotate(360deg);
    }}
    
    .Rotation {
    	-webkit-transform: rotate(360deg);
    	animation: rotation 8s linear infinite;
    	-moz-animation: rotation 8s linear infinite;
    	-webkit-animation: rotation 8s linear infinite;
    	-o-animation: rotation 8s linear infinite;
    }
    
    .img {
    	border-radius: 200px;
    }
    </style>
    </head>
    
    <body>
    	<div class="logo">
    		<img class="Rotation img" src="email.jpg" width="128" height="128" />
    	</div>
    </body>
    
    </html>
    
    
    展开全文
  • css图片旋转

    2015-01-09 12:38:13
    图片旋转效果的一些研究、jQuery插件及实例 一、前面的唠叨 图片的旋转可以说是一种效果,但是逐渐的,旋转已经不单单是属于视觉效果那个范畴,其更具有使用性,功能性。我们都知道,照片有时候是需要横过来的拍...

    图片旋转效果的一些研究、jQuery插件及实例

    一、前面的唠叨

    图片的旋转可以说是一种效果,但是逐渐的,旋转已经不单单是属于视觉效果那个范畴,其更具有使用性,功能性。我们都知道,照片有时候是需要横过来的拍的,当我们预览或共享到web上时需要进行旋转。这个操作在以往可能更多的是交给软件去完成,然后再将旋转到正常角度的图片发布到web上。但是,现在直接就可以在web上对图片进行旋转之类的处理,就算图片处理软件再怎么方便好用,也不及直接发布时对图片做调整来的方便。这就是图片旋转功能的实用意义。我们可以在新浪微博上见到这种图片旋转的功能。
    新浪微博图片旋转

    二、CSS3与图片旋转

    CSS3中有支持图片旋转的属性:CSS3 >> transform >> rotate 。举个简单的例子,例如下面的CSS代码:

    -moz-transform:rotate(-90deg); -webkit-transform:rotate(-90deg);

    将其作用于图片上,结果如下(截自Firefox3.5):
    Firefox3.5下的旋转效果

    从左图可以看到,图片旋转了-90度,也就是顺时针旋转了270度。CSS3下的旋转效果不仅可以作用于图片,任何的inline水平或是block水平的元素都受其作用,并且可以实现任意角度的旋转,确实很实用。前面我也写过一篇相关的文章:CSS3 transition实现超酷图片墙动画效果 ,里面有一些关于CSS3 transform的介绍。
    不可避免,说到CSS3,就要扯到“支持性”这个问题,与其他些CSS3属性类似,IE浏览器不支持,Opera也不支持。只有Firefox3+,chrome与Safari浏览器支持transform的rotate属性,所以,只想用CSS实现旋转效果,有难度。其他不说,得要解决浏览器大头IE才是,好在IE的私有滤镜可以实现元素的旋转效果,见下一部分。

    三、IE滤镜与图片旋转

    IE的filter滤镜其实不算个太好的东西,我个人感觉是这样,像个性格孤僻的自以为是的独裁者,但是,很多时候,没有办法,还是得想到它。要说目前IE下最简单的实现图片旋转的效果,那莫过于其私有的滤镜属性了。

    首先,简单点的,实现与上例类似的效果,代码如下:

    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

    结果与上面的效果一致:
    IE下旋转效果

    这里,滤镜代码部分,前面长长的大小写错综的部分我们不用管它,看后面的”rotation=3″这是关键,这里的参数可以是0,1,2,3,没有4,要是是4啊,5啊之类的,图片就不旋转了。旋转的角度只要将这些数值乘以90(π/2)就可以了,所以呢”rotation=3″表示顺时针旋转270度,与transform:rotate(270deg);是一个意思。所以,这里,就会有些小小的局限——不能实现任意角度的旋转,只能是90度,180度以及270度。但是,IE浏览器不是个简单的罗罗,要实现任意角度的旋转,它还是有办法的,只是要比上面的麻烦些,难理解些,要用到矩阵变换滤镜。

    ps:据说,纯粹是据说,目前为止我没遇到过,IE8浏览器(在非标准模式下),在CSS中,要使用“-ms-filter”代替“filter”。

    先上实例代码,以下代码将实现图片顺指针旋转60度的效果:

    filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.5,M12=-0.866,M21=0.866,M22=0.5,SizingMethod='auto expand');

    结果呢,IE6下的效果就是:
    IE下滤镜旋转60度的效果

    这里滤镜参数好像比较多,看得人心里毛毛的,不过呢,拆开来看,也是小家常。

    我们要关注的其实就只是这一部分:”M11=0.5,M12=-0.866,M21=0.866,M22=0.5″,有人可能会问,这里的几个数值是怎么来的,答案很简单 – “计算来的”。假设我们要旋转的角度是rotation,则计算过程如下:

    sin = sin(roation);cos = cos(roation);
    M11 = cos;M12 = -sin;M21 = sin;M22 = cos;

    例如这里要旋转60度,即rotation=60,所以sin = sin(60) = 0.866, cos = cos(60) = 0.5,于是就有了”M11=0.5,M12=-0.866,M21=0.866,M22=0.5″。所以呢,要实现IE下任意角度图片的旋转记住下面的式子就可以了:filter:progid:DXImageTransform.Microsoft.Matrix(M11=cos(roation),M12=-sin(roation),M21=sin(roation),M22=cos(roation),SizingMethod='auto expand');

    这个矩阵滤镜还可以实现进行缩放,对此不详述。

    四、CSS3与IE滤镜图片旋转综合与对比

    不管三七二十一,先看一个综合实例,方便对比。
    实现旋转90度和135度两个效果,CSS部分代码如下:

    #rot90{-moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); transform:rotate(90deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}
    #rot135{-moz-transform:rotate(135deg); -webkit-transform:rotate(135deg); transform:rotate(135deg); filter:progid:DXImageTransform.Microsoft.Matrix(M11=-0.707,M12=-0.707,M21=0.707,M22=-0.707,SizingMethod='auto expand');}
    

    HTML部分:

    <img id="rot90" width="128" height="96" src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />旋转90°
    <img id="rot135" width="128" height="96" src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />旋转135°

    以下为IE和Firefox下的对比图:
    IE滤镜旋转和Firefox 下CSS旋转差异

    正如上图标注的,虽然看上去实现的旋转效果是一样的,但实际上CSS3下的旋转不改变原始图片占据的空间的大小,所以您会看到使用CSS3 transform旋转的图片可那会覆盖在其他元素上,但是IE却不是如此,图片占据空间的大小一致是跟着旋转后的图片走的,所以IE滤镜实现的旋转就不会看到图片覆盖其他元素的情况,因为它会把它们挤开。

    如果不考虑在中国使用率极低的Opera浏览器以及比较较低的Firefox2以及以下的浏览器,事情(图片旋转)似乎变得很容易。
    ,我们似乎可以轻松的实现图片的旋转——例如开始新浪微博图片旋转截图效果的实现只要变变class类就可以了。但是,我们可以放弃Opera浏览器以及Firefox2及以下版本的浏览器了吗?这要看你网站的目标群体,大小,及性质了。在目前的状况下,一般而言,是放弃不得了,这就迫使我们另谋出路,这就是HTML5中的canvas标签。

    五、canvas标签与图片旋转

    首先简单讲讲canvas标签,canvas属于HTML元素,是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。

    <canvas> 标记由 Apple 在 Safari 1.3 Web 浏览器中引入。对 HTML 的这一根本扩展的原因在于,HTML 在 Safari 中的绘图能力也为 Mac OS X 桌面的 Dashboard 组件所使用,并且 Apple 希望有一种方式在 Dashboard 中支持脚本化的图形。Firefox 1.5 和 Opera 9 都跟随了 Safari 的引领。这两个浏览器都支持 <canvas> 标记(使用js插件也可以使IE支持canvas标签)。所以,虽然纯粹的CSS不能照顾到Opera浏览器以及低版本的Firefox,没有关系,我们可以使用canvas标签。

    canvas只是有一个基于 JavaScript 的绘图 API,所以说要使用canvas绘图离不开JavaScript,题外话不说,我们看怎样利用canvas+JavaScript实现图片的旋转吧。

    这里IE先放在一边,我们看看如何使用canvas实现旋转90度的效果,代码如下:

    HTML部分
    <canvas id="cv"></canvas>
    <img id="cvImg" width="128" height="96" src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />
    JavaScript部分
    window.onload = function(){
    	var canvas = document.getElementById("cv");
    	var oImg = document.getElementById("cvImg");
    	//旋转后canvas标签的大小
    	canvas.height = 128;
    	canvas.width = 96;
    	//绘图开始
    	var context = canvas.getContext("2d");
    	context.save();
    	//改变中心点
    	context.translate(96,0);
    	//旋转90°
    	context.rotate(Math.PI/2);
    	//绘制
    	context.drawImage(oImg, 0, 0, 128, 96);
    	context.restore();
    	oImg.style.display = "none";
    };
    

    结果在不支持CSS3 transform的Opera9浏览器下:
    Opera下使用canvas实现的旋转效果

    如果要让IE下也有同样的效果,很简单,加上这么句代码:
    <!- -[if IE]><script type="text/javascript" src="http://www.zhangxinxu.com/style/js/excanvas.js"></script><![endif]- ->(这里为了防止注释冲突,双连线用空格隔开了)

    其中链接的js文件是使IE浏览器也支持canvas标签的插件JavaScript,能实现大多数canvas标签实现的效果,图片的旋转当然不在话下,您可以试试。

    六、旋转效果jQuery插件

    通过上面的一些探讨,其实可以发现实现图片旋转的方法其实不少,这里介绍的这个jQuery插件使用的方法是:IE下滤镜+其他浏览器canvas的方法。

    插件压缩后不足2k,是款很轻量级的插件,很精巧。可以实现任意角度图片的旋转,使用方法也很简单。例如:$("imgRotate").rotate(90);就是表示旋转90度了,如果要实现向左转与向右转,有专门的方法,就是$(“选择器”).rotateLeft(); 与 $(“选择器”).rotateRight();

    具体使用实例参见下一部分。

    七、图片旋转实例

    本实例要实现的效果就是新浪微博上的图片的“向左转”和“向右转”效果。将使用三种方法,一是忽略低版本Firefox与Opera浏览器的CSS方法;二是使用jQuery插件实现效果的示例;三是纯粹canvas标签无JavaScript库支持实现的方法。

    不完全兼容的CSS方法
    此方法的原理很简单,切换HTML元素对象(图片)的class。如下CSS代码:

    .rot1{-moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); transform:rotate(90deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}
    .rot2{-moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); transform:rotate(180deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);}
    .rot3{-moz-transform:rotate(270deg); -webkit-transform:rotate(270deg); transform:rotate(270deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}
    

    再添加简单的JavaScript代码——根据是向左转还是向右转动态改变class的名称就行了。
    这里使用的是CSS3+filter滤镜的方法,所以低版本的Firefox以目前版本的Opera浏览器下式没有效果的。但绝对适用于90%以上的互联网用户了。

    jQuery插件实现方法
    使用插件一般而言是比较简单的。但是这里,由于插件js是款相当轻量级的代码插件,功能有限。如果不做任何特别的处理的话,此插件只支持一次的图片旋转效果,因为分析插件可知,当运行一次canvas旋转后,canvas标签会将原来的图片标签代替掉,使得图片的连续旋转遇到麻烦,需要每次旋转后重新输入图片相关的HTML代码。
    上面所述对应的JavaScript代码如下:

    param.right.click(function(){
    	if(!$("img#rotImg").length){
    		param.box.html('<img id="rotImg" src="http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg" />');
    	}
    	fun.right(); //执行向右旋转
    	return false;
    });
    

    js部分需要调养jQuery库和此轻量级旋转插件

    说明:此效果在IE下似乎有点问题,经常会有点击无旋转,再点击跳过刚才旋转的情况,我不清楚是次插件的问题,还是IE浏览器对filter矩阵滤镜数据变换效果的bug,还是自己js部分由问题,希望谁知道原因可以告诉一声,不甚感谢!

    canvas方法
    此方法不依赖任何的JavaScript库,兼容性强,而且没有出现一些不知名的问题,我自己是比较喜欢的。为了让其在IE下也支持canvas标签,需要调用一个js插件,由Google发起

    展开全文
  • CSS图片旋转

    2016-03-21 10:03:29
    -moz-transform:rotate(-180deg); -webkit-transform:rotate(-180deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=6);
    -moz-transform:rotate(-180deg);
    -webkit-transform:rotate(-180deg);
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=6);
    展开全文
  • css图片旋转效果

    2019-01-10 11:46:54
    图片旋转 &lt;style&gt; div,img,body{ margin: 0; padding: 0; } /*.box{ height: 150px; width:300px; background: #1b7b80; margin: 0 auto; ...

    图片旋转

    <style>
        div,img,body{
            margin: 0;
            padding: 0;
        }
        /*.box{
            height: 150px;
            width:300px;
            background: #1b7b80;
            margin: 0 auto;
            padding: 20px;
        }*/
        .box:hover img{
            transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
        }
        img{
            margin: 0 auto;
            display: block;
            transition: all 0.2s ease-in-out;
            -webkit-transition: all 0.2s ease-in-out;
            -moz-transition: all 0.2s ease-in-out;
            -o-transition: all 0.2s ease-in-out;
        }
    </style>
    </head>
    <body>
        <div class="box">
            <img src="../doc/1.jpg" width="100" height="100"/>
        </div>
    </body>

    左右抖动

    <style>
        .lanren {
            margin: 100px auto;
            width: 100px;
            text-align: center;
            height: 40px;
            line-height: 40px;
            border: 1px solid #CCC;
            border-radius: 2px;
        }
        .lanren:hover {
            animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
            transform: translate3d(0, 0, 0);
            backface-visibility: hidden;
            perspective: 1000px;
        }
        @keyframes shake {
            10%, 90% {
                transform: translate3d(-2px, 0, 0);
            }
            20%, 80% {
                transform: translate3d(4px, 0, 0);
            }
            30%, 50%, 70% {
                transform: translate3d(-8px, 0, 0);
            }
            40%, 60% {
                transform: translate3d(8px, 0, 0);
            }
        }
    </style>
    </head>
    <body>
    <div class="lanren">Hover Me</div>​
    </body>
    展开全文
  • css图片旋转180样例

    万次阅读 2018-05-02 16:10:24
    &lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt;...text/css"&gt; #test{ width:30px; height: 30px;
  • 0:1 setrotateIndex(rotateIndex1) } return ( <> 旋转 ) } export default zimg .box_img{ width: 100vw; height: 100vh; overflow: hidden; } //旋转90度,宽度和高度调换位置,并调整中心位置 .box_rotate{ ...
  • css3旋转图片蜂窝布局鼠标悬停图片旋转动画特效 css3旋转图片蜂窝布局鼠标悬停图片旋转动画特效 css3旋转图片蜂窝布局鼠标悬停图片旋转动画特效 css3旋转图片蜂窝布局鼠标悬停图片旋转动画特效
  • css实现图片旋转效果

    2017-10-25 16:51:34
    css样式控制图片旋转,实现两张图片以一个圆心不同频率的旋转。
  • 在网页中我们经常会用到旋转图片等问题,我们该如何使用css设置图片旋转效果呢?今天教大家如何用CSS在HTML做出图片旋转的效果,图片的任意角度都可以旋转。css设置图片旋转效果可以使用css3的transform属性,...
  • css3指定图片旋转 css3指定图片旋转
  • css3图片旋转鼠标悬停图片360度旋转效果代码 css3图片旋转鼠标悬停图片360度旋转效果代码 css3图片旋转鼠标悬停图片360度旋转效果代码
  • css 实现 图片旋转

    万次阅读 2018-08-07 21:55:58
    鼠标放在图片旋转180度 可用在头像上 比较俏皮 效果如下: 代码如下: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8...
  • CSS旋转图片

    千次阅读 热门讨论 2015-10-23 09:27:55
    CSS旋转图片1、实现源码 CSS旋转图片 #div_img{ margin: 100px auto 0; transform:rotate(30deg); -moz-transform:rotate(30deg); -webkit-transform:rotate(30deg); -o-transform:rotate(30deg); ...
  • CSS3图片旋转代码,没有使用JS实现的图片旋转,鼠标放上后图片就开始旋转,CSS3实现的动画效果,值得学习借鉴 。
  • css3 图片旋转效果 以y轴翻转效果等

    万次阅读 2016-08-25 15:47:48
    css 图片旋转效果
  • css3 transform旋转属性鼠标悬停3D立体图片旋转显示 css3 transform旋转属性鼠标悬停3D立体图片旋转显示
  • CSS3鼠标经过图片旋转放大特效是一款采用CSS3结合图片实现的鼠标悬停到图标上面旋转放大展示效果。
  • CSS图片3D旋转效果

    千次阅读 2017-03-15 16:37:31
    CSS图片3D旋转效果
  • css3 transform 3D 图片旋转木马
  • js和CSS实现图片旋转

    千次阅读 2018-12-25 11:43:25
    分别用了CSS动画还有JS实现,但是JS给我感觉会好点,因为我希望实现的是鼠标进入,获取当前旋转角度,正向加旋,鼠标移除,获取当前角度,逆向减旋,后面发现css实现的动画,是从你设置的初始开始,即鼠标进入,从0...
  • 在给 程序员 的设计学习指南上看到一个...使用CSS实现图片旋转,有三部分组成:1个HTML文件(Index.html)、1个CSS文件(spin.css)和几张图片。首先,spin.css文件.fa{display:inline-block;font:normalnormalnorma...
  • CSS 图片动态旋转

    千次阅读 2020-03-10 17:32:46
    CSS 图片动态旋转 <div class="header-logo"> <img src="../../img/logo.png" /> </div> .header-container>.header-photo>img { width: 50px; height: 50px; margin-top: 10px; /* ...
  • css3图片旋转如何实现? 在网页中,我们经常可以看到一张图片在旋转,这样的图片旋转是怎么来实现的呢?本篇文章就来为你介绍一下关于css3实现图片旋转动画效果的方法。 实现css3中图片的旋转可以使用可以使用 -...
  • css图片旋转90度的方法:利用transform属性来进行图片旋转,如【transform:rotate(90deg)】。transform属性用于元素的2D或3D转换,该属性允许我们将元素旋转、缩放、移动、倾斜。属性介绍:Transform属性应用于...
  • CSS3鼠标经过图片旋转放大特效是一款采用CSS3结合图片实现的鼠标悬停到图标上面旋转放大展示效果。
  • css 背景图片 旋转

    2017-12-28 22:21:00
    .div(HTML中的名字 .**){... //旋转7度-ms-transform:rotate(7deg); /* IE 9 */支持的浏览器 下同-moz-transform:rotate(7deg); /* Firefox */-webkit-transform:rotate(7deg); /* Safari 和 Chrome */-o...
  • css 实现图图片旋转

    千次阅读 2019-04-16 15:55:28
    .box { width: 150px; height: 150px;... // 页面加载完成之后,图片停止旋转并隐藏 setTimeout(function(){ $(".box").css({ 'animation':'none', 'display':'none' }) },1000) })  

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 28,708
精华内容 11,483
关键字:

css图片旋转