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. DEDE整站动态化或整站静态化设置方法,织梦栏目批量静态/动态方法

    跟版网建站接到一个朋友提问,100多各栏目全部要从动态变成静态,里面的文章也要静态化,如何更快捷的设置dede的静态化或者动态化呢? 直接用DEDE后台的SQL命令行工具, SQL语句: DEDE整站 ...

  2. bash 脚本编程 利用 “=” 赋值时，左右不能留空格

    对脚本变量用“=”赋值时, "=" 左右不能留有空格,否则会提示错误. 比如以下例子: #!/bin/bash BEGIN_TIME = `date +%H:%M:%S` ./a. ...

  3. Oracle 中的分析函数

    Oracle常用分析函数介绍(排名函数+窗口函数) 2014年11月30日 ⁄ 数据库 ⁄ 共 3903字 ⁄ 暂无评论 ⁄ 阅读 7,772 次 评级函数 常见评级函数如下: RANK():返回数据 ...

  4. C#线程池使用

    bool stop; private void button3_Click(object sender, EventArgs e) { if(button3.Text=="线程池" ...

  5. 在Vi里面实现字符串的批量替换

    在Vi里面实现字符串的批量替换. a. 文件内全部替换: %s#abc#def#g(用def替换文件中所有的abc) 例如把一个文本文件里面的"linuxidc.com"全部替换成 ...

  6. 光盘刻录 CD刻录软件 Ashampoo Burning Studio特别版 刻录CD就这么简单

    著名的刻录软件Nero,其近上百M体积实在太大,而且安装之后的文件体积也有上G多.这么大的体积安装使用都不方便,好在现在很多都做得很不错,比如阿香婆的光盘刻录软件Ashampoo® Burning S ...

  7. Python学习笔记 之 函数

    函数 函数式编程最重要的是增强代码的重用性和可读性  定义和使用 def 函数名(参数): ... 函数体 ... 返回值 函数的定义主要有如下要点: def:表示函数的关键字 函数名:函数的名称,日 ...

  8. 数据结构图文解析之：数组、单链表、双链表介绍及C++模板实现

    0. 数据结构图文解析系列 数据结构系列文章 数据结构图文解析之:数组.单链表.双链表介绍及C++模板实现 数据结构图文解析之:栈的简介及C++模板实现 数据结构图文解析之:队列详解与C++模板实现 ...

  9. Gulp和Webpack工具的区别

    引用知乎的回答:https://www.zhihu.com/question/37020798 怎么解释呢?因为 Gulp 和 browserify / webpack 不是一回事 Gulp应该和Gr ...

  10. C语言常见类型占用字节数

    前言 最近笔试经常遇到c语言各类型变量所占字节数的问题,这里做一个总结好了. 类型 常见的有char.int.long.short.float.double及指针等. 字符类型 这里单只char,ch ...