CSS动画效果可以使用transform和Animation，前者较简单，先学习前者。

transform有几个基本变换，平移、旋转、缩放、扭曲

一、translate平移

有translate2d和translate3d之分，实际项目中可以只考虑3d，因为可以开启3d硬件加速。

transform：translate3d(Xpx,Ypx,Zpx)

即各自向各方向平移多少像素，单位px

二、rotate旋转

实际也可以只考虑3d，即rotate3d

但是rotate3d只能对各轴设定相同的值，即transform：rotate3d(1,1,0,45deg)，前三个参数是布尔值，表示当前轴是否旋转，不能单独指定旋转角度。

可以transform：rotate3d(1,0,0,45deg) rotate3d(0,1,0,90deg) rotate3d(0,0,1,30deg)  对各轴设定选择角度

三、scale缩放

四、skew扭曲

平移和选择的demo如下

<html>

<head>

    <title>transform demo</title>

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <style>

        body{

            overflow: hidden;

        }

        #content{

            -webkit-perspective: 500;

            -webkit-perspective-origin:50% 50%;

            width: 100%;

            height: 100%;

        }

        #test{

            width: 280px;

            height: 397px;

            margin: 0 auto;

            background-image: url(bg.png);

            background-color: #eee;

            transition:all 1s;

        }

        #tool{

            width: 300px;

            height: 200px;

            margin: 0 auto;

            text-align: center;

            padding: 20px;

        }

    </style>

    <script>

        function getlate(){

            var lateX=$("input[name='lateX']").val();

            $("input[name='lateX']").next('span').html(lateX+"px");

            var lateY=$("input[name='lateY']").val();

            $("input[name='lateY']").next('span').html(lateY+"px");

            var lateZ=$("input[name='lateZ']").val();

            $("input[name='lateZ']").next('span').html(lateZ+"px");

            $("#test").css("transform","translate3d("+lateX+"px,"+lateY+"px,"+lateZ+"px)");

        }

        function getrotate(){

            var rotateX=$("input[name='rotateX']").val();

            $("input[name='rotateX']").next('span').html(rotateX+"deg");

            var rotateY=$("input[name='rotateY']").val();

            $("input[name='rotateY']").next('span').html(rotateY+"deg");

            var rotateZ=$("input[name='rotateZ']").val();

            $("input[name='rotateZ']").next('span').html(rotateZ+"deg");

            $("#test").css("transform","rotate3d(1,0,0,"+rotateX+"deg) "+"rotate3d(0,1,0,"+rotateY+"deg) "+"rotate3d(0,0,1,"+rotateZ+"deg)");

        }

        $(function(){

            getlate();

            getrotate();

        });

    </script>

</head>

<body>

    <div id="content">

        <div id="test"></div>

        <div id="tool">

            X轴平移<input type="range" name="lateX" min="-100" max="100" value="0" onchange="getlate();"/><span></span><br />

            Y轴平移<input type="range" name="lateY" min="-100" max="100" value="0" onchange="getlate();"/><span></span><br />

            Z轴平移<input type="range" name="lateZ" min="-100" max="100" value="0" onchange="getlate();"/><span></span><br />

            X轴旋转<input type="range" name="rotateX" min="-180" max="180" value="0" onchange="getrotate();"/><span></span><br />

            Y轴旋转<input type="range" name="rotateY" min="-180" max="180" value="0" onchange="getrotate();"/><span></span><br />

            Z轴旋转<input type="range" name="rotateZ" min="-180" max="180" value="0" onchange="getrotate();"/><span></span>

        </div>

    </div>

</body>

</html>

CSS3——transform学习的更多相关文章

  1. 【CSS3】 理解CSS3 transform中的Matrix(矩阵)

    理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...

  2. 理解CSS3 transform中的Matrix(矩阵)

    一.哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如“拉普拉斯不等式”).这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面“Matrix(矩阵) ...

  3. css3 3d学习心得

    css3 3d学习心得 卡片反转 魔方 banner图 首先我们要学习好css3 3d一定要有一定的立体感 通过这个图片应该清楚的了解到了x轴 y轴 z轴是什么概念了. 首先先给大家看一个小例子: 卡 ...

  4. 理解CSS3 transform中的Matrix(矩阵)——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2427 一.哥,我被你 ...

  5. CSS3 Transform变形理解与应用

    CSS3 Transform变形理解与应用 Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开 ...

  6. css3 transform 旋转div

    css3 transform 旋转div 学习了:http://www.w3school.com.cn/cssref/pr_transform.asp

  7. 小心 CSS3 Transform 引起的 z-index "失效"

    https://www.douban.com/note/343402554/ http://www.jb51.net/css/255811.html 最后我直接removeClass;把transfo ...

  8. CSS3 transform rotate（旋转）锯齿的解决办法

    -moz-transform: rotate(5deg);-webkit-transform: rotate(5deg); 把图片旋转了5度.本以为轻而易举,可遇到了问题.在Fireofx中显示正常, ...

  9. CSS3 transform对普通元素的N多渲染影响

    一.一入transform深似海 一个普普通通的元素,如果应用了CSS3 transform变换,即便这个transform属性值不会改变其任何表面的变化(如scale(1), translate(0 ...

随机推荐

  1. WPF MVVM 验证

    WPF MVVM(Caliburn.Micro) 数据验证 书接前文 前文中仅是WPF验证中的一种,我们暂且称之为View端的验证(因为其验证规是写在Xaml文件中的). 还有一种我们称之为Model ...

  2. 谈谈你对 Struts 2 的理解

    谈谈你对Struts的理解. struts是一个按MVC模式设计的Web层框架,其实它就是一个大大的servlet,这个Servlet名为ActionServlet,或是ActionServlet的子 ...

  3. AppBox升级进行时 - Entity Framework的增删改查

    AppBox 是基于 FineUI 的通用权限管理框架,包括用户管理.职称管理.部门管理.角色管理.角色权限管理等模块. Entity Framework新增数据 以新增用户为例,作为对比,先来看下使 ...

  4. jQuery1.9之后使用on()绑定 动态生成元素的 事件无效

    来自互联网: 需要绑定a的父级元素(此元素必须为静态元素,不是后来动态生成的),然后设定on()方法的selector参数才行: $('p').on('mouseenter', 'a', functi ...

  5. 如何实时查看linux下的日志

    Linux日志文件在/var/log目录下,可以通过命令查看日志文件. 1,cat messages可以查看某个日志文件. 2,要达到实时更新,可以通过tail命令查看更新的数据,例如tail -f ...

  6. Ubuntu默认防火墙安装、启用、配置、端口、查看状态相关信息

    Ubuntu附带了一个相对iptables简单很多的防火墙 配置工具:ufw ufw防火墙 即uncomplicated firewall,不复杂的防火墙,繁琐部分的设置还是需要去到iptables ...

  7. Python笔记（3）迭代器与生成器

    参考自:http://www.cnblogs.com/huxi/category/251137.html 迭代器 迭代器是访问集合内元素的一种方式,他不能倒退只能一直迭代下去.可以写到for循环in后 ...

  8. 教你一招：Win10系统如何正确卸载edge浏览器？

    Edge浏览器作为Win10系统默认浏览器,尽管我们将其他浏览器设置为默认程序,但是有时候还是会自动弹出,非常的不爽,但是在控制面板中却又找不到卸载“Edge”浏览器的选项.下面小编就教大家卸载“Ed ...

  9. AOJ DSL_2_E Range Add Query (RAQ)

    Range Add Query 数列 A = {a1,a2,...,an} に対し.次の2つの操作を行うプログラムを作成せよ. add(s,t,x): as,as+1,...,at にxを加算する. ...

  10. 【BZOJ-2325】道馆之战 树链剖分 + 线段树

    2325: [ZJOI2011]道馆之战 Time Limit: 40 Sec  Memory Limit: 256 MBSubmit: 1153  Solved: 421[Submit][Statu ...