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. php结合redis实现高并发下的抢购、秒杀功能

    抢购.秒杀是如今很常见的一个应用场景,主要需要解决的问题有两个:1 高并发对数据库产生的压力2 竞争状态下如何解决库存的正确减少("超卖"问题)对于第一个问题,已经很容易想到用缓存 ...

  2. PHP开发工具+电子书+视频教程等资料下载汇总

    本汇总帖包括如下内容: PHP开发工具.PHP IDE PHP学习资源 基础.进阶类 PHP学习资源 高级及应用类 经典PHP视频教程系列 1. PHP开发工具.PHP IDE: PHP开发工具:Ze ...

  3. ASP.NET WebForm中异步请求防止XSRF攻击的方法

    在ASP.NET MVC中微软已经提供了如何防止跨域攻击的方法.对于传统Webfrom中使用Handler来接受ajax的Post请求数据,如何来防止XSRF攻击呢.这里给大家提供一个简单地方法,和M ...

  4. jquery.lazyload 实现图片延迟加载jquery插件

    看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery..   什么是ImageLazyLoad技术 在页面上图 ...

  5. 剑指offer 面试题65 滑动窗口的最大值

    import java.awt.print.Printable; import java.beans.VetoableChangeListenerProxy; import java.lang.ref ...

  6. jQuery 教程

    jQuery 教程 W3School H-ui前端框架 html标签

  7. MacTalk阅读有感

    MacTalk by 池建强 高手的思维境界 -贴地气 -有思想 技术普及 文字是表达人思想的载体,池老师将自己的经历,经验分享给大家,很值得大家学习,虽然我只是个初出茅庐的小菜,现在有指路明灯一样. ...

  8. Java多线程卖票例子

    package com.test; public class SaleTickets implements Runnable { private int ticketCount = 10;// 总的票 ...

  9. 【poj1742】 Coins

    http://poj.org/problem?id=1742 (题目链接) 题意 给出n钟纸币,每种纸币面值为a[i],数量为c[i],问能够成多少数值小于等于m的数. Solution 先想到了容斥 ...

  10. Configure Security Settings for Remote Desktop(RDP) Services Connections

    catalogue . Configure Server Authentication and Encryption Levels . Configure Network Level Authenti ...