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. Java面试宝典摘抄

    1,ClassLoader知识 加载流程:当运行一个程序时,JVM启动,运行bootstrap classloader,该classloader加载Java核心API(此时ExtClassLoader ...

  2. codevs 2924 数独挑战

    2924 数独挑战 http://codevs.cn/problem/2924/ 题目描述 Description "芬兰数学家因卡拉,花费3个月时间设计出了世界上迄今难度最大的数独游戏,而 ...

  3. Tech Websites

    1,3D Game Engine Programming 2, 3, 4, 5,

  4. ubuntu12.04中shell脚本无法使用source的原因及解决方法

    现象: shell脚本中source aaa.sh时提示 source: not found 原因: ls -l `which sh` 提示/bin/sh -> dash 这说明是用dash来进 ...

  5. Linux 中 Oracle dmp 文件导入导出

    a. 用户名 system 密码 manager 导出到D:/daochu.dmp中 exp system/manager@SID file=d:/daochu.dmp full=y b. 将数据库中 ...

  6. ConvertHelper 通用类

    public class ConvertHelper<T> where T : new() { private static Dictionary<Type, List<IPr ...

  7. C#时间戳转时间-时间转时间戳

    /// <summary> /// 时间戳转为C#格式时间 /// </summary> /// <param name=”timeStamp”></para ...

  8. python select 实现

    python的select()方法直接调用操作系统的IO接口 它监控sockets,openfiile,pipes (所有带fileno()的方法的文件句柄) 什么时候变成 readable writ ...

  9. 读取本地外网IP地址

    读取本地外网IP地址. 根据启动并运行的网卡名称,找到本机实际的IP地址(已知当前运行的无线网卡名包含某一个字符) import java.net.InterfaceAddress; import j ...

  10. C#-WinForm-Winform TextBox中只能输入数字的几种常用方法(C#)

    方法一: private void tBox_KeyPress(object sender, KeyPressEventArgs e) { if (e.KeyChar == 0x20) e.KeyCh ...