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. 九度OJ--1165(C++)

    #include <iostream>#include <string>#include <vector> using namespace std; int mai ...

  2. day-8 python自带库实现ID3决策树算法

    前一天,我们基于sklearn科学库实现了ID3的决策树程序,本文将基于python自带库实现ID3决策树算法. 一.代码涉及基本知识 1. 为了绘图方便,引入了一个第三方treePlotter模块进 ...

  3. DFS(7)——poj1011Sticks

    一.题目回顾 题目链接:Sticks 题意:给出一定数量的小木棒的长度,它是由等长的若干木棒随意砍断所得到的.对于给定的一组小木棒,请求出原始木棒的最小长度. 二.解题思路 DFS+剪枝 本题剪枝不到 ...

  4. websocket协议详解;

    websocket是基于http协议,借用http协议来完成连接阶段的握手: 当连接建立后,浏览器和服务器之间的通信就和http协议没有关系了,b.s之间只用websocket协议来完成基本通信. = ...

  5. 【转】V8 之旅: 垃圾回收器

    垃圾回收器是一把十足的双刃剑.其好处是可以大幅简化程序的内存管理代码,因为内存管理无需程序员来操作,由此也减少了(但没有根除)长时间运转的程序的内存泄漏.对于某些程序员来说,它甚至能够提升代码的性能. ...

  6. 《Hadoop基础教程》之初识Hadoop(转载)

    转载自博主:上善若水任方圆http://blessht.iteye.com/blog/2095675 Hadoop一直是我想学习的技术,正巧最近项目组要做电子商城,我就开始研究Hadoop,虽然最后鉴 ...

  7. 【EasyNetQ】- 基于topic的路由

    RabbitMQ具有非常酷的功能,基于主题的路由,允许订户根据多个标准过滤消息.主题是由与消息一起发布的点分隔的单词列表.例如,“stock.usd.nyse”或“book.uk.london”或“a ...

  8. 算法(5)Jump Game

    题目:非负数的数组,每个数组元素代表这你能最大跨越多少步,初始在0的位置,问,能不能正好调到数组的最后一位! https://leetcode.com/problems/jump-game/#/des ...

  9. http请求的过程

    http请求格式: http请求格式由四部分组成,分别是:请求行,请求头,空行,消息体,每个部分占一行. 请求行是消息体的第一行,由三部分组成,分别是:请求方法,请求资源的url,http的版本号. ...

  10. 转:maven常用命令介绍

    mvn 3.0.4 创建maven项目命令  mvn  archetype:generate   -DgroupId=damocles-autocredit -DartifactId=damocles ...