关于css3的transform，做了一个demo，上代码

html：

 <!DOCTYPE html>

 <html>

 <head lang="en">

 <link rel="stylesheet" href="practice.css" type="text/css" >

 <script src="../js/jquery-2.1.1.min.js" type="text/javascript" ></script>

 <meta charset="UTF-8">

 <title>transform</title>

 </head>

 <body>

 <div class="container">

   <div class="out">

       <ul>

          <li class="in"><img src='1.jpg' /></li>

          <li class="in"><img src='2.jpg' /></li>

          <li class="in"><img src='3.jpg' /></li>

          <li class="in"><img src='4.jpg' /></li>

          <li class="in"><img src='5.jpg' /></li>

       </ul>

   </div>

   <div class="control">

      <div class='detail'>

         <span>transform-style:&nbsp;&nbsp;&nbsp;flat:<input type="radio" name='style' value='flat'/>&nbsp;&nbsp;&nbsp;preserve-3d:<input type="radio" name='style' value='preserve-3d' /></span>

         <p>你选择transform_style为<span></span></p>

      </div>

      <div class='detail'>

         <span>perspective:</span><input name='perspective' type="range" min='0' max='800' value='0' step='1'/>

         <p>你选择的perspective值为<span></span></p>

      </div>

      <div class='detail'>

         <span>translateX:</span><input name='translateX'  type="range" min='0' max='50' value='0' step='1'/>

         <p>你选择的translateX值为<span></span></p>

      </div>

      <div class='detail'>

         <span>translateY：</span><input name='translateY' type="range" min='0' max='50' value='0' step='1'/>

         <p>你选择的translateY值为<span></span></p>

      </div>

      <div class='detail'>

         <span>translateZ：</span><input name='translateZ' type="range" min='0' max='50' value='0' step='1'/>

         <p>你选择的translateZ值为<span></span></p>

      </div>

      <div class='detail'>

         <span>rotateX：</span><input name='rotateX' type="range" min='0' max='180' value='0' step='1'/>

         <p>你选择的rotateX值为<span></span></p>

      </div>

      <div class='detail'>

         <span>rotateY：</span><input name='rotateY' type="range" min='0' max='180' value='0' step='1'/>

         <p>你选择的rotateY值为<span></span></p>

      </div>

      <div class='detail'>

         <span>rotateZ：</span><input name='rotateZ' type="range" min='0' max='180' value='0' step='1'/>

         <p>你选择的rotateZ值为<span></span></p>

      </div>

   </div>

 </div>

css比较简单，就不上了

js:

<script>

$(function(){

    var transform_style='flat',translateX='0px',translateY='0px',translateZ='0px',perspective='0px',rotateX=0,rotateY=0,rotateZ=0;

    $("input").on('change',function(){

        if($(this).attr('name')==='style'){

            if($(this).is(":checked")){

                transform_style=$(this).val();

                $("ul").css({"transform-style":transform_style});

                $(this).parent().siblings('p').find('span').text(transform_style)    ;

            }

        }else{

            var change=$(this).attr('name');

            var val=$(this).val();

            switch(change){

                case 'perspective':

                    perspective=val+'px';

                    break;

                case 'translateX':

                    translateX=val+'px';

                    break;

                case 'translateY':

                   translateY=val+'px';

                   break;

                case 'translateZ':

                   translateZ=val+'px';

                   break;

                case 'rotateX':

                    rotateX=val;

                    break;

                case 'rotateY':

                   rotateY=val;

                   break;

                case 'rotateZ':

                   rotateZ=val;

                   break;

            }

            $(this).siblings('p').find('span').text(val);

            $('.in').css({'-webkit-transform':'perspective('+perspective+') translate3d('+translateX+','+translateY+','+translateZ+') rotateX('+rotateX+'deg) rotateY('+rotateY+'deg) rotateZ('+rotateZ+'deg)'})

        }

    })

})

</script>

transform应用详解的更多相关文章

  1. 第98天：CSS3中transform变换详解

    transform变换详解 本文主要介绍变形transform. Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放sc ...

  2. CSS3 transform 属性详解(skew, rotate, translate, scale)

    写这篇文章是因为在一个前端QQ群里,网友 "小豆豆" (应他要求要出现他的网名......) ,问skew的角度怎么算,因为他看了很多文章还是不能理解skew的原理.于是,我觉得有 ...

  3. 2016 - 1- 14 UI阶段学习补充 transform属性详解

    UIView的transform属性 transform是view的一个重要属性,它在矩阵层面上改变view的显⽰状态,能实现view的缩放.旋转.平移等功能.transform是CGAffineTr ...

  4. CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

  5. iOS开发——UI篇OC&transform详解

    transframe属性详解 1. transform属性 在OC中,通过transform属性可以修改对象的平移.缩放比例和旋转角度 常用的创建transform结构体方法分两大类 (1) 创建“基 ...

  6. 【CSS3 transform属性和过渡属性详解】

    CSS3transform属性详解 transform字面上就是变形,改变的意思. 在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translat ...

  7. css3系列之transform详解translate

    translate translate这个参数的,是transform 身上的,那么它有什么用呢? 其实他的作用很简单,就是平移,参考自己的位置来平移 translate() translateX() ...

  8. CSS3属性transform详解【转载】

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

  9. 详解如何用 CSS3 完成 3D transform变换

    Tips:阅读提示!!! 首先,本文针对的是3D transform变换的学习,所以你需要对 2D transform变换 有一定的了解 其次,需要说明的是,代码是一种需要自己不断实践的学科,建议各位 ...

随机推荐

  1. CSS3–2.css3 响应式布局

    1.响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站 ...

  2. SVN 搭建

    http://www.blogjava.net/jasmine214--love/archive/2010/09/26/332989.html http://hunan.iteye.com/blog/ ...

  3. 在ubuntu上搭建开发环境1---在windows7的基础上在安装ubuntu（双系统）

    转载:http://jingyan.baidu.com/article/60ccbceb18624464cab197ea.html 当需要频繁使用ubuntu时,vmware虚拟机下运行ubuntu, ...

  4. poj 2155:Matrix（二维线段树，矩阵取反，好题）

    Matrix Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 17880   Accepted: 6709 Descripti ...

  5. wp8 入门到精通 虚拟标示符 设备ID

    //获得设备虚拟标示符 wp8 public string GetWindowsLiveAnonymousID() { object anid = new object(); string anony ...

  6. 【leetcode】Remove Duplicates from Sorted Array

    题目描述: Given a sorted array, remove the duplicates in place such that each element appear only once a ...

  7. [Mobile] 手机浏览器输入框-数字输入框

    手机浏览器的输入框,一直都是以web的方式进行开发的,没有关注到用户体验,领导提出了输入框要弹出数字输入框,想来应该有这种技术能实现.   搜索之后发现可以使用type="number&qu ...

  8. Windows phone 8.0 本地化遇到的两个问题

    基本上来说,按照msdn来讲的,本地化和全球化没有太多的问题,链接如下: http://msdn.microsoft.com/zh-cn/library/windowsphone/develop/ff ...

  9. HDU 3341 Lost's revenge（AC自动机+DP）

    Lost's revenge Time Limit: 15000/5000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others)T ...

  10. Apache Tomcat配置