关于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公开课 – 1.基础 (2013-3-15广州传智MVC公开课)

      1.MVC设计模式 Model 是指 要处理的业务代码和数据操作代码 View 视图 主要是指的 跟用户打交道 并能够展示数据 Controller 看成是 Model和View的桥梁 优点: 1 ...

  2. Spring Boot的快速启动和部署

    >>关于Spring Boot 这是官网描述的特点: 1.Create stand-alone Spring applications 创建独立的Spring应用 2.Embed Tomc ...

  3. Linux下Vi/Vim使用笔记

    启动和关闭vim vi 打开 Vi/Vim 打开 Vi/Vim 并加载文件 <file> vi <file> vim编辑器的三种模式:一般模式.编辑模式和命令行模式在一般模式中 ...

  4. Webstorm & PhpStorm的序列号和证书

    WebStorm注册码 User Name: EMBRACE License Key: ===== LICENSE BEGIN ===== 24718-12042010 00001h6wzKLpfo3 ...

  5. 随机生成字符串-php-js

    js <script language="javascript"> function randomString(len) { len = len || 32; var ...

  6. NS2中修改载波侦听范围和传输范围

    修改这两个值是在tcl中进行的,加上 Phy/WirelessPhy set CSThresh_ 1.559e-11 ;#550m Phy/WirelessPhy set RXThresh_ 3.65 ...

  7. 六款小巧的HTTP Server[C语言]

    1.micro_httpd - really small HTTP server特点: 支持安全的 .. 上级目录过滤 支持通用的MIME类型 支持简单的目录 支持目录列表 支持使用 index.ht ...

  8. SQLite密码添加移除

    背景:电脑清理--个人洁癖 SQLite的最原始的是没有加密的,从而衍生了多种加密算法,但在平常使用中使用System.Data.Sqlite,但其加密后,一般都需要要单独的sqlite管理器--像我 ...

  9. 函数fgets和fputs、fread和fwrite、fscanf和fprintf用法小结 （转）

    函数fgets和fputs.fread和fwrite.fscanf和fprintf用法小结 字符串读写函数fgets和fputs 一.读字符串函数fgets函数的功能是从指定的文件中读一个字符串到字符 ...

  10. Android之Inflate()

      Inflate()作用就是将xml定义的一个布局找出来,但仅仅是找出来而且隐藏的,没有找到的同时并显示功能.最近做的一个项目就是这一点让我迷茫了好几天. Android上还有一个与Inflate( ...