<style>
body{height:400px;border:1px solid #000;}
.box{width:90px;height:30px;border:1px solid;border-radius:8px;background:linear-gradient(to top,red,orange);margin:200px auto;stransform:2s;-webkit-transform-origin:right,bottom;}
.box a{text-decoration:none;text-align:center;display:block;line-height:31px;}

/*2.tanslate:(x轴,y轴) 在原元素的基础上x,y移动*/
/*body .box:hover {-webkit-transform:translate(-50px,60px);} */

/* 3. scale(x,y)增加或缩小元素 高x 宽y sacleX(x) scaleY(y)
body .box:hover{-webkit-transform:scale(-10,-5) scaleX(5) scaleY(5);} */

/* 4.rotate(0deg) 正值顺时针旋转 负值逆时针旋转
body .box:hover{-webkit-transform:rotate(260deg);}
body .box:hover{-webkit-transform:scale(5,3) rotate(30deg);} */
/* 5.-webkit-transform:skew(x,y) 给定角度
body .box:hover{-webkit-transform:skew(30deg,50deg);}*/

/*6.body .box:hover{transform:matrix(0.866,0.5,-0.5,0.866,0,0);}*/
</style>

css3 2D动画的基本用法和介绍的更多相关文章

  1. 14:CSS3 渐变(gradient)与 过度(transition)、CSS3 的2D动画

    14:CSS3 渐变 CSS3 渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可 ...

  2. css3 2d转换3d转换以及动画的知识点汇总

    css3 2d转换 2d转换的方法: 1.移动 translate(x, y) 可以改变元素的位置,x.y可为负值: 2.缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x.y的取值 ...

  3. CSS3 2D转换 动画

    transform:translate(x,y): 过度  鼠标悬浮 在2s内完成所有变化 div { width:100px; height:100px; background:red; trans ...

  4. CSS3 2D Transform

    在 一个二维或三维空间,元素可以被扭曲.移位或旋转.只不过2D变形工作在X轴和Y轴,也就是大家常说的水平轴和垂直轴:而3D变形工作在X轴和Y轴之外, 还有一个Z轴.这些3D变换不仅可以定义元素的长度和 ...

  5. Unity3D初学之2D动画制

    作者:Alex Rose Unity最近宣布推出额外的2D游戏支持,添加了Box 2D物理和一个精灵管理器. 但这里还是有些技巧需要牢记在心.逐帧更改图像只是动画制作的冰山一角,若要让你的游戏出色运行 ...

  6. 2D动画的制作

    通过css3的transform  transition可以实现平移,旋转,缩放,拉伸等效果 1.缩放 -webkit-transform: scale(1); -moz-transform: sca ...

  7. 使用css3的动画模拟太阳系行星公转

    本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...

  8. CSS3制作动画的三个属性

    CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation:我们一起学习完了Transform和Transition,让我们对元素实现了一些基本的动画效果,这 ...

  9. css3常用动画+动画库

    一.animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库.包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡 ...

随机推荐

  1. Qt界面对象的事件调用

    QMetaObject::invokeMethod(m_mainToolBarItem, "change2DesktopMode", Q_ARG(QVariant, m_curMo ...

  2. MS SQLSERVER 存儲過程與緩存

    提升SQL Server最具性能的一个方面就是存储过程,SQL Server具备执行计划的缓存功能,以便计划重用.SQL Server2000增强了ad-hoc执行计划的缓存功能,就处理存储过程上性能 ...

  3. jdk环境变量的配置并检测是否配置成功

    JDK环境变量配置进行java开发,首先安装JDK,安装后进行环境变量配置1,下载JDK(http://java.sun.com/javase/downloads/index.jsp)2.安装jdk- ...

  4. 分布式管理系统-git安装及配置

    安装完成后,在开始菜单里找到“Git”->“Git Bash”,蹦出一个类似命令行窗口的东西,就说明Git安装成功! 安装完成后,还需要最后一步设置,在命令行输入: $ git config - ...

  5. 【POJ2699】The Maximum Number of Strong Kings(二分,最大流)

    题意: 有n个队伍,两两都有比赛 知道最后每支队伍获胜的场数 求最多有多少队伍,他们战胜了所有获胜场数比自己多的队伍,这些队伍被称为SK N<=50 思路:把每个队伍和它们两两之间的比赛都当做点 ...

  6. QuickHit快速击键小程序 --S2.4.5

    我们现在要做一个项目 一个小小的程序 叫做快速击键 很明了的目的 就是在规定时间内,每次出现一组字母的组合,这个字母只能在DFJK中生成 然后输入相应的文字,按回车 自动判断输入的是否正确 在规定时间 ...

  7. openstack快速封装镜像

    本来是该写对接ceph的,但是临时有事了,必须先弄镜像,因此提前写这个了,我个人不是按官网来封装镜像的,是按自己的习惯,所以觉得信不过的可以用官网的方式,有兴趣的可以看看都知道,openstack创建 ...

  8. linux RPM、YUM

    Linux 界的两大主流: RPM 与 DPKG distribution 代表 软件管理机制 使用指令 在线升级机制(指令) Red Hat/Fedora RPM rpm, rpmbuild YUM ...

  9. Android 7.0 UICC 分析(二)

    本文讲解UiccCard类 /frameworks/opt/telephony/src/java/com/android/internal/telephony/uicc/UiccCard.java U ...

  10. JavaBean的toString方法工具类

    import java.lang.reflect.Field;import java.lang.reflect.InvocationTargetException;import java.lang.r ...