css3 变形/变换

相关属性

  • transform
  • transform-origin
  • transform-style:flat/preserve-3d
  • perspective: 长度单位
  • perspective-origin观察者的位置
  • backface-visibialbe:visible/hidden

变形方法 transform-function

  • 2d
  • translate() 位移(像素/百分号)
  • translatex()
  • translatey()
  • scale() 缩放(倍数)
  • scalex()
  • scaley()
  • rotate() 旋转(角度deg)
  • skew() 扭曲(角度)x扭曲y变x不变
  • skewx()
  • skewy()
  • 3d
  • translatez()
  • translate3d()
  • scalez()
  • scale3d()
  • rotatex()
  • rotatey()
  • rotatez()

css过渡

相关属性

  • transition

  • transition-property过渡属性

  • none

  • all所有可以进行过渡的CSS属性

  • transition-timing-function 过渡方式

  • linear: 线性过渡

  • ease: 平滑过渡。

  • ease-in: 由慢到快。

  • ease-out: 由快到慢

  • ease-in-out: 由慢到快再到慢

  • transition-duriation过渡时间
  • transition-delay延迟

触发时机

  • 伪类选择器
  • JS
  • 媒体查询

CSS3动画

相关属性

  • animation

  • animation-name动画名称

  • animation-iteration-count循环次数infinite无限循环

  • animation-duration动画持续时间

  • animation-timing-function动画的过渡类型

  • linear: 线性过渡

  • ease: 平滑过渡。

  • ease-in: 由慢到快。

  • ease-out: 由快到慢

  • ease-in-out: 由慢到快再到慢。

  • animation-delay动画延迟时间

  • animation-dirction动画方向

  • normal: 正常方向

  • reverse: 反方向运行

  • alternate: 动画先正常运行再反方向运行,并持续交替运行

  • alternate-reverse: 动画先反运行再正方向运行,并持续交替运行

  • animation-play-state:running运动/pasused暂停

  • animation-fill-mode:动画时间之外的状态

  • none: 默认值。不设置对象动画之外的状态

  • forwards: 设置对象状态为动画结束时的状态

  • backwards: 设置对象状态为动画开始时的状态

  • both: 设置对象状态为动画结束或开始的状态

关键帧

@keyframes 动画名称{
form{
}
to{
}
}

CSS变形的更多相关文章

  1. 深入理解CSS变形transform(2d)

    × 目录 [1]变形原点 [2]变形函数 [3]多值 前面的话 CSS变形transform是一些效果的集合,主要是移动.旋转.缩放和倾斜这四种基本操作,还可以通过设置matrix矩阵来实现更复杂的效 ...

  2. 用CSS变形创建圆形导航

    http://www.w3cplus.com/css3/building-a-circular-navigation-with-css-transforms.html 本文由陈毅根据SARA SOUE ...

  3. CSS变形transform(2d)

    前面的话 CSS变形transform是一些效果的集合,主要是移动.旋转.缩放和倾斜这四种基本操作,还可以通过设置matrix矩阵来实现更复杂的效果.变形transform可以实现2D和3D两种效果. ...

  4. CSS变形动画

    CSS变形动画 前言 在开始介绍CSS变形动画之前,可以先了解一下学习了它之后能做什么,有什么用,这样你看这篇文章可能会有一些动力. 学习了CSS变形动画后,你可以为你的页面做出很多炫酷的效果,如一个 ...

  5. css变形 transform【转】

    transition:过度属性 transition-property 规定设置过度效果的css属性的名称,默认可以写all transition-duration 规定完成过度效果需要多少秒或毫秒 ...

  6. 深入理解CSS变形transform(3d)

    × 目录 [1]坐标轴 [2]透视 [3]变形函数 [4]透视函数 [5]变形原点 [6]背景可见 [7]变形风格 前面的话 本文将详细介绍关于transform变形3D的内容,但需以了解transf ...

  7. 深入理解 CSS变形 transform(3d)

    坐标轴 在了解透视之前,首先要先了解坐标轴.3D变形与2D变形最大的不同就在于其参考的坐标轴不同.2D变形的坐标轴是平面的,只存在x轴和y轴,而3D变形的坐标轴则是x.y.z三条轴组成的立体空间,x轴 ...

  8. JavaScript--结合CSS变形、缩放能拖拽的登录框

    上例图: 代码块: <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  9. css“变形”效果

    <html <head> <title></title> <style> .test { margin-left:300px; margin-to ...

随机推荐

  1. pip消失后复原

    pip是python中比较常用的管理依赖包的工具.今天心血来潮更新一下pip版本,结果悲剧发生了. -bash: /Library/Frameworks/Python.framework/Versio ...

  2. VC++之运算符重载简单小结

    封装继承和多态是面向对象三大基本支柱.在面向对象系统中有两种编译方式:静态联编和动态联编静态联编:也叫早期联编:指系统在编译时就决定如何实现某一动作,提供了执行速度快的优点.动态联编:也叫滞后联编:指 ...

  3. 通过 systemctl 设置自定义 Service

    如果要在Linux 上设置一个开机自启,出现问题自动重启,并且有良好日志的程序,比较流行的方法有 supervisord.systemd,除此之外,还有 upstart.runit 等类似的工具. 但 ...

  4. URAL 1936 Roshambo(求期望)

    Description Bootstrap: Wondering how it's played? Will: It's a game of deception. But your bet inclu ...

  5. UnrealEngine4入门(二) 实现一个可用按键控制的球体

    源码摘自官网guide,加上部分自己的理解和注释 接上篇博客 本文实现一个可用WASD控制滚动的球体 先创建一个可见的球体: 在CollidingPawn.cpp的构造函数ACollidingPawn ...

  6. java对数组的操作

    1 拷贝数组 数组全拷贝 数组定位拷贝 2 判断数组是否相等(每个元素都对应相等) 3 数组和集合的相互转化 import java.util.Arrays; import java.util.Lis ...

  7. javascript中将整数添加千位符号

    如果num是整数的话,将其转换成带千位符号的字符串: Number(num).toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1' +  ','); 另 ...

  8. Flink State的两张图

    streamTask的invoke方法中,会循环去调用task上的每个operator的initializeState方法,在这个方法中,会真正创建除了savepointStream的其他三个对象, ...

  9. ActiveMQ使用详解---相关概念

    一.前言 公司之前使用activeMQ做过一款用于系统之间传递信息的工具,最近才正式投入生产使用,这期间出现了一些比较奇怪的问题,最终发现是没有清晰的了解activeMQ的相关配置以及一些相关概念,借 ...

  10. Citrix Netscaler版本管理和选择

    Citrix Netscaler版本管理和选择 来源 http://blog.51cto.com/caojin/1898164 随着Citrix Netscaler的快速发展,有很多人在维护设备时经常 ...