Pictures (rotate / zoom / flip) the transform (ccs3 / filter / canvas)

分类:Web 2010-09-29 来源 人气:212

To achieve the image before rotation or flipping, ie the filters can only be achieved, although the canvas is also achieved, but ie does not support the standard and not html.
css3 out, finally can use the standard transform to achieve transformation, the canvas has become a standard part of html5.
css3 and html5 the web become more powerful, a variety of novel technologies are waiting for us to explore.
Respectively, through the filter of the program (ie), ccs3 and canvas to achieve the rotation picture, zoom and flip transformation effects, can be used as a picture viewer.
Has the following features:
1, with filter, ccs3 and canvas to achieve the same effect of the transformation;
2, can be rotated at any angle;
3, can be overturned at any angle;
4, can be extended wheel zoom;
5, scalable drag rotation.
Compatibility: ie6/7/8, firefox 3.6.8, opera 10.6, safari 5.0.1, chrome 5.0

Reprinted please reference:

blog comments powered by Disqus


  • ie, chrome, firefox, safari, opera html5 2008-07-31

    When the Ming among mainstream browsers chrome, firefox, safari, opera have been supported or are prepared to support HTML5, only ie does not support, for good or MS disappointed! html5 Usage: html5: Effect Demo: htt ...

  • safari,opera嵌入iframe页面cookie读取问题解决方法 2014-04-14

    最近做的合作网站嵌入到对方的iframe中去,在safari,opera和有些版本的搜狗浏览器(内核版本原因)中不能读到cookie。 查到原因是因为在这些浏览器中对第三方的cookie安全验证比较严格,需要确认是用户主动到第三方网站的,才能读到cookie,于是加个引导页面要用户点击下才能进入我们的组件。 1,首页 判断是否是这些浏览器,若是则去引导页面,其中reflag是判断是否已经去过引导页面。若已经引导过就不去引导页面了。 function safarireload() { var re

  • Picture (rotation / zoom / flip) transformation effect (ccs3 / filter / canvas) 2010-08-21

    Ago to achieve the picture rotate or flip, ie the filter can only be achieved, although the canvas is also achieved, but ie does not support the standard and not html. css3 out, finally can use the standard transform to achieve transformation, the canvas

  • js实现可兼容IE.FF.Chrome.Opera及Safari的音乐播放器 2013-11-27

    这篇文章主要介绍了js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器,通过自定义javascript函数audioplayer实现兼容各常见浏览器的音乐播放功能,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器。分享给大家供大家参考。具体实现方法如下: /** 音乐播放器 * @param obj 播放器id * @param file 音频文件 mp3: ogg: * @param lo

  • JavaScript in the mouse wheel event Xiangjie 2010-03-27

    /*Firefox Register the event */ if(document.addEventListener){ document.addEventListener('DOMMouseScroll',scrollFunc,false); } Safari and Chrome are the same type, you can use HTML DOM methods to add an event window.onmousewheel=document.onmousewheel=scro

  • CSS3新的鼠标样式介绍 2014-10-09

    在Web开发的早期,随着新技术的不断涌现,一切都让人兴奋。但是我们在过去十年里经历了一个技术的停滞期,直到由于HTML5的出现,Web开发再次让人着迷。特别是CSS3正在迅速发展,你会在其规范里发现许多有趣的宝物。 在这篇文章里,我们要研究的是CSS鼠标样式属性,正如你所期望的的一样,它允许你改变在一个元素上移动鼠标时的指针样式。它对于交互式Web App来说已经变得越来越重要。 CSS2的鼠标样式 CSS2中提供相对较少的选择(悬停在不同的网页元素上,看看鼠标指针样式是如何变化的): [htm

  • SVG - Scalable Vector Graphics 2010-07-24

    Recent want to use the company's system structure, said web page out of order to the relevant resource information and inquiries are linked together. Think of drawing charts in three ways: SVG, HTML5 and flash. SVG only familiar with one that has

  • CSS3 pointer-events介绍 2014-03-31

    其实早知道这个属性,但是一直没有去研究过。今天正好在twitter看到这个词,就去研究了下,正好解决了目前遇到的一个小难题,所以分享下。嗯,其实这是个比较简单的CSS3属性。 在某个项目中,很多元素需要定位在一个地图层上面,这里就要用到很多绝对定位或者相对定位的元素,但是这样的话,这些浮在上面的div或者其它元素一般都会给个宽高,或者relative的元素可以不给宽高,这个时候,这些元素就会盖住下面的地图层,以至于地图层无法操作。。。 然后正好在Google map见到了类似的问题,拿来当例子来

  • The CSS is compatible with the Firefox.Safari IE6.IE7 Summary 2010-07-12

    1. Padding & margin padding time, IE & Firefox, like, div's size will increase, div padding the corresponding position to increase the value of the corresponding position. Margin time, IE6, IE7 div's parent container to benchmark the

iOS 开发

Android 开发

Python 开发



PHP 开发

Ruby 开发






Javascript 开发

.NET 开发



Copyright (C), All Rights Reserved. 版权所有 黔ICP备15002463号-1

processed in 0.023 (s). 14 q(s)