CSS变形
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变形的更多相关文章
- 深入理解CSS变形transform(2d)
× 目录 [1]变形原点 [2]变形函数 [3]多值 前面的话 CSS变形transform是一些效果的集合,主要是移动.旋转.缩放和倾斜这四种基本操作,还可以通过设置matrix矩阵来实现更复杂的效 ...
- 用CSS变形创建圆形导航
http://www.w3cplus.com/css3/building-a-circular-navigation-with-css-transforms.html 本文由陈毅根据SARA SOUE ...
- CSS变形transform(2d)
前面的话 CSS变形transform是一些效果的集合,主要是移动.旋转.缩放和倾斜这四种基本操作,还可以通过设置matrix矩阵来实现更复杂的效果.变形transform可以实现2D和3D两种效果. ...
- CSS变形动画
CSS变形动画 前言 在开始介绍CSS变形动画之前,可以先了解一下学习了它之后能做什么,有什么用,这样你看这篇文章可能会有一些动力. 学习了CSS变形动画后,你可以为你的页面做出很多炫酷的效果,如一个 ...
- css变形 transform【转】
transition:过度属性 transition-property 规定设置过度效果的css属性的名称,默认可以写all transition-duration 规定完成过度效果需要多少秒或毫秒 ...
- 深入理解CSS变形transform(3d)
× 目录 [1]坐标轴 [2]透视 [3]变形函数 [4]透视函数 [5]变形原点 [6]背景可见 [7]变形风格 前面的话 本文将详细介绍关于transform变形3D的内容,但需以了解transf ...
- 深入理解 CSS变形 transform(3d)
坐标轴 在了解透视之前,首先要先了解坐标轴.3D变形与2D变形最大的不同就在于其参考的坐标轴不同.2D变形的坐标轴是平面的,只存在x轴和y轴,而3D变形的坐标轴则是x.y.z三条轴组成的立体空间,x轴 ...
- JavaScript--结合CSS变形、缩放能拖拽的登录框
上例图: 代码块: <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...
- css“变形”效果
<html <head> <title></title> <style> .test { margin-left:300px; margin-to ...
随机推荐
- pip消失后复原
pip是python中比较常用的管理依赖包的工具.今天心血来潮更新一下pip版本,结果悲剧发生了. -bash: /Library/Frameworks/Python.framework/Versio ...
- VC++之运算符重载简单小结
封装继承和多态是面向对象三大基本支柱.在面向对象系统中有两种编译方式:静态联编和动态联编静态联编:也叫早期联编:指系统在编译时就决定如何实现某一动作,提供了执行速度快的优点.动态联编:也叫滞后联编:指 ...
- 通过 systemctl 设置自定义 Service
如果要在Linux 上设置一个开机自启,出现问题自动重启,并且有良好日志的程序,比较流行的方法有 supervisord.systemd,除此之外,还有 upstart.runit 等类似的工具. 但 ...
- URAL 1936 Roshambo(求期望)
Description Bootstrap: Wondering how it's played? Will: It's a game of deception. But your bet inclu ...
- UnrealEngine4入门(二) 实现一个可用按键控制的球体
源码摘自官网guide,加上部分自己的理解和注释 接上篇博客 本文实现一个可用WASD控制滚动的球体 先创建一个可见的球体: 在CollidingPawn.cpp的构造函数ACollidingPawn ...
- java对数组的操作
1 拷贝数组 数组全拷贝 数组定位拷贝 2 判断数组是否相等(每个元素都对应相等) 3 数组和集合的相互转化 import java.util.Arrays; import java.util.Lis ...
- javascript中将整数添加千位符号
如果num是整数的话,将其转换成带千位符号的字符串: Number(num).toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1' + ','); 另 ...
- Flink State的两张图
streamTask的invoke方法中,会循环去调用task上的每个operator的initializeState方法,在这个方法中,会真正创建除了savepointStream的其他三个对象, ...
- ActiveMQ使用详解---相关概念
一.前言 公司之前使用activeMQ做过一款用于系统之间传递信息的工具,最近才正式投入生产使用,这期间出现了一些比较奇怪的问题,最终发现是没有清晰的了解activeMQ的相关配置以及一些相关概念,借 ...
- Citrix Netscaler版本管理和选择
Citrix Netscaler版本管理和选择 来源 http://blog.51cto.com/caojin/1898164 随着Citrix Netscaler的快速发展,有很多人在维护设备时经常 ...