html5--6-50 动画效果-变形

实例

学习要点

  • 掌握2D变形动画
  • 了解3D变形动画

transform:2D变形:

通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。转换方法:translate()/rotate()/scale()/skew()/matrix()

  • none 定义不进行转换。
  • translate(x,y) 定义 2D 平移转换。
  • translateX(x) 定义转换,只是用 X 轴的值。
  • translateY(y) 定义转换,只是用 Y 轴的值。
  • scale(x,y) 定义 2D 缩放转换
  • scaleX(x) 通过设置 X 轴的值来定义缩放转换。
  • scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
  • rotate(angle) 定义 2D 旋转,在参数中规定角度。
  • 补充1.角度也可以使用弧度单位:rad

  • skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换
  • kewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
  • skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
  • matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
  • 变形矩阵功能很强大,但是相对比较复杂,涉及到复杂的数学计算,在本章中暂不作详细讲解。

  • transform-origin:改变元素变形的基准点
    • 像素/百分比
    • X轴:left/right/center
    • Y轴:top/bottom/center/

transform:3D变形:

transform:3D变形可以近似理解为沿着Z轴移动元素,使得元素更加靠近或者远离你,从而使元素看起来变得更大或更小。

    • transform:3D变形函数

        • translate3d(x,y,z) 定义 3D 转换
        • translateY(y) 定义转换,只是用 Y 轴的值。
        • translateX(x) 定义转换,只是用 X 轴的值。
        • translateZ(z) 定义 3D 转换,只是用 Z 轴的值。
        • rotate3d(x,y,z,angle) 定义 3D 旋转
        • rotateX(angle) 定义沿着 X 轴的 3D 旋转。
        • rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
        • rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
        • scale3d(x,y,z) 定义 3D 缩放转换
        • scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
        • scaleX(x) 通过设置 X 轴的值来定义缩放转换。
        • scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
        • matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。
    • transform-origin 允许你改变被转换元素的位置。2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。
    • perspective(n) 为 3D 转换元素定义透视视图。
    • transform-style 规定被嵌套元素如何在 3D 空间中显示。
      • flat 子元素将不保留其 3D 位置。
      • preserve-3d 子元素将保留其 3D 位置。
  • perspective-origin 规定 3D 元素的底部位置。目前浏览器都不支持 perspective-origin 属性,暂不讲解
  • backface-visibility 定义元素在不面对屏幕时是否可见。浏览器支持度不好,暂不讲解

html5--6-50 动画效果-变形的更多相关文章

  1. HTML5 Canvas动画效果演示

    HTML5 Canvas动画效果演示 主要思想: 首先要准备一张有连续帧的图片,然后利用HTML5 Canvas的draw方法在不同的时间 间隔绘制不同的帧,这样看起来就像动画在播放. 关键技术点: ...

  2. 用CSS3制作50个超棒动画效果教程

    这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动.为了能够预览到这些惊人的CSS3技术带来的动画特效,请大家使用如Safari和Chrome这类基于WebKit内核的浏览器 ...

  3. HTML5 动画效果的多种实现方式

    HTML5 动画效果的多种实现方式 1.  CSS3 transform + transition https://www.w3.org/TR/css-transforms-1/ https://ww ...

  4. HTML5 Maker – 在线轻松制作 HTML5 动画效果

    HTML5 Maker 是一个在线动画制作工具,帮助你使用 HTML,CSS 和 JavaScript 创建动态,互动的内容.它非常容易使用,同时可以帮你实现非常好的效果.它可以制作跨浏览器的动画内容 ...

  5. HTML5夜空烟花绽放动画效果

    模板描述:HTML5夜空烟花绽放动画效果基于HTML5 canvas制作,模拟夜空烟花绽放动画效果,烟花会在夜空打出贺词,有新年快乐.合家幸福.万事如意.心想事成.财源广进等,文字可以自定义,做成各种 ...

  6. HTML5+javascript实现图片加载进度动画效果

    在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览:   0%   // ...

  7. 7个惊艳的HTML5 Canvas动画效果及源码

    HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...

  8. 基于html5页面滚动背景图片动画效果

    基于html5页面滚动背景图片动画效果是一款带索引按钮的页面滚动动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="fullpage&q ...

  9. HTML5 3D动画效果

    对以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,第一是浏览器不够先进,第二是大部分只能用flash实现伪3D.HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要再使用像IE67 ...

随机推荐

  1. Codeforces891C. Envy

    $n \leq 5e5$,$m \leq 5e5$的无向边权图,$q \leq 5e5$个询问,每次问一系列边是否能同时存在于某棵最小生成树上. 一条边在最小生成树上,当比他小的边都加入后,加入他会使 ...

  2. mysql续

    接上篇博客,写完以后看了看,还是觉的写的太简单,就算是自己复习都不够,所以再补充一些 1.创建多表关联 需求:图书管理系统,创建几张表,包含书籍,出版社,作者,作者详细信息等内容 分析: (1)图书只 ...

  3. LeetCode OJ--Implement strStr()

    http://oj.leetcode.com/problems/implement-strstr/ 判断一个串是否为另一个串的子串 比较简单的方法,复杂度为O(m*n),另外还可以用KMP时间复杂度为 ...

  4. sring->list->del->string->int:解析左右编码器的,和#号

    #def test_sprintf(): import string ' str1="1234567890," print'str1 is',str1 list_raw=list( ...

  5. Java网络编程之InetAddress和URL

    在Java中提供了专门的网络开发程序包---java.net,java的网络编程提供了两种通信协议:TCP(传输控制协议)和UDP(数据报协议). 一.IP(Internet Protocol) 与I ...

  6. Angular2.X 笔记

    本文为原创,转载请注明出处: cnzt       文章:cnzt-p http://www.cnblogs.com/zt-blog/p/7762590.html 前提: angular-cli (前 ...

  7. 用 jQuery实现图片等比例缩放大小

    原文:http://www.open-open.com/code/view/1420975773093 <script type="text/javascript"> ...

  8. mysql批量删除相同前缀的表格

    原文:http://www.open-open.com/code/view/1446691883076 如果你网站后台没法运行mysql,就进phpmyadmin,然后运行一段代码.假如要删除织梦cm ...

  9. 前端编程提高之旅(十)----表单验证插件与cookie插件

        实际项目开发中与用户交互的常见手法就是採用表单的形式.取得用户注冊.登录等信息.而当用户注冊或登录后又须要记住用户的登录状态.这就涉及到经常使用的两个操作:表单验证与cookie增删查找.   ...

  10. 【基础练习】【线性DP】codevs3027 线段覆盖2题解

    文章被盗还是非常严重,加版权信息 转载请注明出处 [ametake版权全部]http://blog.csdn.net/ametake欢迎来看看 这道题目是线性动归 可是思想和背包有些类似 事实上线性动 ...