关于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. ARPPING

    http://www.tuicool.com/articles/M7B3umj http://lixcto.blog.51cto.com/4834175/1571838/

  2. 栈与队列：refresh的停车场

    数据结构实验之队列一:排队买饭 Time Limit: 1000MS Memory limit: 65536K 题目描述 中午买饭的人特多,食堂真是太拥挤了,买个饭费劲,理工大的小孩还是很聪明的,直接 ...

  3. 无废话ExtJs 入门教程十六[页面布局：Layout]

    无废话ExtJs 入门教程十六[页面布局:Layout] extjs技术交流,欢迎加群(201926085) 首先解释什么是布局: 来自百度词典的官方解释:◎ 布局 bùjú: [distributi ...

  4. poj 3321:Apple Tree（树状数组，提高题）

    Apple Tree Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 18623   Accepted: 5629 Descr ...

  5. Linux 端口-> PID -> 启动目录

    1.    lsof -i :8443   找到PID 比如说是5413 2.    ps aux | grep 5413  可以得到一些信息 3.    除了第二步的方式,更直观的是 cd /pro ...

  6. windows下Tomcat配置多实例

    详情参见tomcat安装目录下RUNNING.txt中Advanced Configuration - Multiple Tomcat Instances部分. 问题源于下面这段tomcat官方文档的 ...

  7. hdu 4023 2011上海赛区网络赛C 贪心+模拟

    以为是贪心,结果不是,2333 贪心最后对自己绝对有利的情况 点我 #include<cstdio> #include<iostream> #include<algori ...

  8. win8.1/win10 UEFI + GPT 安装（测试机型：华硕S56CM）

    本教程简要介绍在UEFI 启动模式下在GPT分区表中,最简单的方法安装 Windows 10 x64 位系统.(并非傻瓜教程,安装者总要有一定的经验基础)下面先简单介绍一下UEFI和GTP. UEFI ...

  9. 简单解释Windows如何使用FS段寄存器

    详见附件 jpg改rar

  10. SQL详解（上）

    SQL 什么是SQL:结构化查询语言(Structured Query Language).SQL标准(例如SQL99,即1999年制定的标准): 由国际标准化组织(ISO)制定的,对DBMS的统一操 ...