1. transform-style: preserve-3d; 设置3D模式
  1. perspective700px ;属性定义 3D 元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身
  1. perspective-origin50% 50% ;属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。当为元素定义 perspective-origin 属性时,其子元素会获得透视效果,而不是元素本身。

  1. 设置动画
    @keyframes mymove
  2. {
  3. 0% {top:0px;}
  4. 25% {top:200px;}
  5. 50% {top:100px;}
  6. 75% {top:200px;}
  7. 100% {top:0px;}
  8. }
  1. div
    {
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:mymove 5s infinite; 绑定上面设置好的动画 时间 infinite规定动画应该无限次播放
    -moz-animation:mymove 5s infinite; /* Firefox */
    -webkit-animation:mymove 5s infinite; /* Safari and Chrome */
    -o-animation:mymove 5s infinite; /* Opera */
    }

animation-timing-function 使用名为三次贝塞尔(Cubic Bezier)函数的数学函数,来生成速度曲线。您能够在该函数中使用自己的值,也可以预定义的值:

  1.  
描述 测试
linear 动画从头到尾的速度是相同的。 测试
ease 默认。动画以低速开始,然后加快,在结束前变慢。 测试
ease-in 动画以低速开始。 测试
ease-out 动画以低速结束。 测试
ease-in-out 动画以低速开始和结束。 测试
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

css 3d 动画 相关的更多相关文章

  1. 奇思妙想 CSS 3D 动画 | 仅使用 CSS 能制作出多惊艳的动画?

    本文将从比较多的方面详细阐述如何利用 CSS 3D 的特性,实现各类有趣.酷炫的动画效果.认真读完,你将会收获到: 了解 CSS 3D 的各种用途 激发你新的灵感,感受动画之美 对于提升 CSS 动画 ...

  2. css 3D动画

    一.今天让我们来学习一下css 3D吧! 1.首先我们要学习好css3 3d一定要有一定的立体感! 2.再来那就聊聊原理吧! 3.css3 3d 顾名思义是由两个2d名片组成的 但不是让你建立连个2d ...

  3. 第四十二课:基于CSS的动画引擎

    由于低版本浏览器不支持css3 animation,因此我们需要根据浏览器来选择不同的动画引擎.如果浏览器支持css3 animation,那么就使用此动画引擎,如果不支持,就使用javascript ...

  4. css3-13 css3的3D动画如何实现

    css3-13 css3的3D动画如何实现 一.总结 一句话总结:这里是transform+setInterval实现.transform属性里面的rotate属性值变成rotateX或rotateY ...

  5. 10个超漂亮的CSS 3D特效

    10个超漂亮的CSS 3D特效 一.总结 一句话总结: 后面有空得好好练一练,也可以作为录课素材 二.10个超漂亮的CSS 3D特效 转自或参考:10个超漂亮的CSS 3D特效https://blog ...

  6. CSS3动画相关属性详解

    本文转载于:<https://blog.csdn.net/lyznice/article/details/54575905> 一.2D效果属性 要使用这些属性,我们需要通过 transfo ...

  7. Codrops 优秀教程:CSS 3D Transforms 实现书本效果

    这个使用  CSS 3D Transforms 实现创意书本效果的来自 Codrops 网站.你可以看到两种类型的书设计:精装书和平装书.这两个效果都可以很容易地使用 CSS 修改.赶紧体验一下吧. ...

  8. 8个经典HTML5 3D动画赏析

    HTML5技术已经越来越被我们所接受,特别是一些3D的动画特效.本文介绍的8个HTML5 3D动画并没有特别华丽的界面,但是比较实用,涉及到3D图片.3D图表.3D按钮等方面,一起来看看. 1.HTM ...

  9. CSS3之动画相关

    CSS3动画相关的属性:transform,transition,animation. 变形Transform 语法: transform: rotate | scale | skew | trans ...

随机推荐

  1. uC/OS-II中includes块

    /*************************************************************************************************** ...

  2. CentOS 6.3下部署LVS(NAT)+keepalived实现高性能高可用负载均衡

    一.简介 VS/NAT原理图: 二.系统环境 实验拓扑: 系统平台:CentOS 6.3 Kernel:2.6.32-279.el6.i686 LVS版本:ipvsadm-1.26 keepalive ...

  3. JavaWeb学习笔记——javabean与表单

  4. Java TCP编程

    Java编写TCP编程--回射信息实例 注:简单的tcp联系,还存在问题,readUTF()为阻塞型,如果之前的用户一直不输入,则一直阻塞,之后的用户再连接会出现问题. import java.io. ...

  5. yourphp读取分类名称{$Categorys[$r[catid]]['catname']}

    页面代码:  product_list.html 提供分类的id,找出分类的名称 {$Categorys[$r[catid]]['catname']}

  6. 谈谈我对PhoneGap的看法——(摘自唐巧的技术博客)

    源地址:http://blog.devtang.com/blog/2012/03/24/talk-about-uiwebview-and-phonegap/ 主题部分 我认为PhoneGap有以下3大 ...

  7. JAVA中的聚集和组合的区别和联系

    选自<JAVA语言程序设计-基础篇(原书第8版)> 定义:一个对象可以包含另一个对象.这两个对象之间的关系称为组合(composition). 组合实际上是聚集关系的一种特殊形式.聚集模拟 ...

  8. yii2的urlManager配置

    网址伪静态是一个非常常用的网站需求,Yii2可以非常简单地进行配置. 首先,在配置文件config/main.php的'components' 段中,加入如下设置:'urlManager'=>a ...

  9. linux中Jetty的安装和配置

    Jetty Jetty 是一个开源的servlet容器,它为基于Java的web内容,例如JSP和servlet提供运行环境.Jetty是使用Java语言编写的,它的API以一组JAR包的形式发布.开 ...

  10. vim ctags使用方法

    一.用好系统自带软件ctags 大部分的unix系统都有ctags软件,它能跟vim很好地合作. 用途:     生成c语言的标签文件,实现相关c文件之间的跳转. 用法:     1.生成标签文件   ...