关于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. MVC公开课 – 2.查询，删除 (2013-3-15广州传智MVC公开课)

    查询 /Controller/HomeController.cs /// <summary> /// 查询 文章 列表 /// </summary> /// <retur ...

  2. JAVA 堆栈知识和Volatile关键字

    栈内存:存放基本类型的变量和对象的引用 堆内存:存放用new创建的对象和数组 栈帧:保存了局部变量表,操作数栈,方法的返回地址以及其它的附加信息 volatile修饰的变量,jvm虚拟机只是保证从主内 ...

  3. 攻城狮在路上（壹） Hibernate（八）--- 映射Hibernate组成关系

    一.使用组成关系的原则: 在不导致数据冗余的前提下,尽可能减少数据库表的数目及表之间的外键参照关系,因为建立多个表的连接是很耗时的操作. 举例说明:Customer类中的Address属性,可以通过组 ...

  4. Centos 上使用Mono+MVC5+WebApi+Sqlite

    鉴于现在网上很多Mono安装Jexus的方法已经过时,你打开百度搜索基本是几个前辈写的文字,很多其实是过去式了.踩的坑多自然使人望而生畏,而方便快捷的方法百度排名却太低,这里就安利下笔者刚成功使用的方 ...

  5. 在WPF中使用CefSharp嵌入浏览器

    日常开发中,我们需要将一些Web页面嵌入到桌面客户端软件中.下面我们使用CefSharp嵌入浏览器来实现. 首先先介绍一下CefSharp嵌入式浏览器,它是基于Google浏览器的一个组件,我们可以在 ...

  6. 怎样在linux下安装网卡驱动

    由于我电脑的各种奇葩问题的存在,导致我装上Ubuntu13.10之后网卡居然无法使用,坚持了挺久使用无线网,终于坚持不住了,百度了各种解决方式,终于成功解决.这里也记录一下我的解决过程,供大家参考.大 ...

  7. [译]：Orchard入门——安装Orchard

    原文链接:Installing Orchard 文章内容基于Orchard 1.8版本 安装Orchard的方式 主要有以下四种方式安装Orchard: 利用Microsoft Web Platfor ...

  8. ios 多文件上传

    /** *  上传多个文件 * *  @param url      请求接口地址 *  @param filedata 文件名称和数据(key:value) *  @param btnName  上 ...

  9. 【java基础】内存分析

    在上次我们说的<重载与重写>呢,我们遗留了一个问题,就是运行结果的各异性,那今天,我们就来探究一下         内存里的天地.                  首先呢,我们把mian ...

  10. a与a:link、a:visited、a:hover、a:active

    原文地址http://www.cnblogs.com/exmyth/p/3226654.html a与a:link.a:visited.a:hover.a:active   起因: a与a:link的 ...