关于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. Delphi之DLL知识学习3---为什么要使用DLL

    使用DLL有若干理由,其中有一些前面提到过的.大体说来,使用动态链接库可以共享代码.系统资源,可以隐藏实现的代码或底层的系统例程.设计自定义控件 一.共享代码.资源和数据 前面已经提到,共享代码是创建 ...

  2. DES加密算法实现

    好久没写博客了,正好趁着实现网络工程与安全的DES算法的功夫,把代码发上来. DES的介绍可见:DES加密 原理不赘述了..实在太多,其实就是一个形式化算法,按部就班的实现就可以,只不过有些繁琐,我写 ...

  3. 攻城狮在路上（叁）Linux（零）--- 软件环境、参考书目等一览表

    1.参考书目:鸟哥的Linux私房菜. 2.环境: Cent_os.

  4. JavaScript - 引用类型

    对象在JavaScript中被称为引用类型的值. 引用类型和传统面向对象设计中的类相似,但实现不同. Object是一个基础类型,其他所有类型都从Object继承了基本的行为. Array类型,Dat ...

  5. C# DatrgridView表格控件的一些用法

    public class useDatrgrivView { string conn = null; string sqlComm = null; DataSet das = null; DataGr ...

  6. PHP获取用户真实IP

    function get_client_ip() { if(getenv('HTTP_CLIENT_IP') && strcasecmp(getenv('HTTP_CLIENT_IP' ...

  7. hdu 4036 2011成都赛区网络赛F 模拟 **

    为了确保能到达终点,我们需要满足下面两个条件 1.能够到达所有山顶 2.能够在遇到苦土豆时速度大于他 二者的速度可以用能量守恒定律做,苦土豆的坐标可通过三角形相似性来做 #include<cst ...

  8. JQuery 操作对象的属性值

    通过JQuery去操作前台对象(div,span...)的属性是很常见的事情,本文就简单的介绍几种操作情形. 1):通过属性值去获取对象 2):用JQuery去修改对象的属性值 3):获取并修改对象的 ...

  9. Android中ViewPager+Fragment取消(禁止)预加载延迟加载(懒加载)问题解决方案

    转载请注明出处:http://blog.csdn.net/linglongxin24/article/details/53205878本文出自[DylanAndroid的博客] Android中Vie ...

  10. Oracle常用命令

    查看数据库锁的情况 SELECT object_name, machine, s.sid, s.serial#  FROM gv$locked_object l, dba_objects o, gv$ ...