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. select,poll,epoll比较

    除常用文件i/o外,其他常用io模型:io多路复用(select和poll系统调用)信号驱动I/Olinux专有的epoll编程接口异步io(aio),linux在glibc中提供有基于线程的 pos ...

  2. 【JavaScript】【CSS】前端规则摘抄

    源:http://zhibimo.com

  3. bootstrap-markdown编辑器引入

    MarkdownAsset.php <?php namespace app\assets; use yii\web\AssetBundle; class MarkdownAsset extend ...

  4. 自己写一个JS单向数据流动库----one way binding

    JS单向流动其实就是数据到视图的过程, 这几天突发奇想,想着弄一个插件, 把DOM结构使用JS进行描述: 因为DOM中的Class , content, id, attribute, 事件, 子元素全 ...

  5. hdu3530 单调队列

    Subsequence Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Tota ...

  6. github-提交仓库

    git提交仓库主要分3快 1.用命令git add告诉Git,把文件添加到本地仓库(可以用.代替提交所有) $ git add readme.txt 2.用命令git commit告诉Git,把文件提 ...

  7. UI: 窗口全屏, 窗口尺寸

    窗口全屏 窗口尺寸 示例1.窗口全屏UI/FullScreen.xaml <Page x:Class="Windows10.UI.FullScreen" xmlns=&quo ...

  8. 麦软社区Mindmanager现金抵用券使用流程

    1.用户登录麦软社区:输入用户名密码 2.点击右上角发表话题,在麦软社区发表文章.教程.模板等等 3.填写要发布的内容 4.发布成功,等待审核 5.审核通过 6.审核通过的用户将会收到站内信,包含mi ...

  9. u盘安装系统教程详解

    一.准备阶段 提前准备一个至少1G或以上的u盘,方便好用. 1.制作u盘启动工具 (1)工具下载,推荐IT天空的优启通 下载地址:https://www.itiankong.net/thread-37 ...

  10. 数据结构图文解析之：树的简介及二叉排序树C++模板实现.

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