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 ...
随机推荐
- 九度OJ--1165(C++)
#include <iostream>#include <string>#include <vector> using namespace std; int mai ...
- day-8 python自带库实现ID3决策树算法
前一天,我们基于sklearn科学库实现了ID3的决策树程序,本文将基于python自带库实现ID3决策树算法. 一.代码涉及基本知识 1. 为了绘图方便,引入了一个第三方treePlotter模块进 ...
- DFS(7)——poj1011Sticks
一.题目回顾 题目链接:Sticks 题意:给出一定数量的小木棒的长度,它是由等长的若干木棒随意砍断所得到的.对于给定的一组小木棒,请求出原始木棒的最小长度. 二.解题思路 DFS+剪枝 本题剪枝不到 ...
- websocket协议详解;
websocket是基于http协议,借用http协议来完成连接阶段的握手: 当连接建立后,浏览器和服务器之间的通信就和http协议没有关系了,b.s之间只用websocket协议来完成基本通信. = ...
- 【转】V8 之旅: 垃圾回收器
垃圾回收器是一把十足的双刃剑.其好处是可以大幅简化程序的内存管理代码,因为内存管理无需程序员来操作,由此也减少了(但没有根除)长时间运转的程序的内存泄漏.对于某些程序员来说,它甚至能够提升代码的性能. ...
- 《Hadoop基础教程》之初识Hadoop(转载)
转载自博主:上善若水任方圆http://blessht.iteye.com/blog/2095675 Hadoop一直是我想学习的技术,正巧最近项目组要做电子商城,我就开始研究Hadoop,虽然最后鉴 ...
- 【EasyNetQ】- 基于topic的路由
RabbitMQ具有非常酷的功能,基于主题的路由,允许订户根据多个标准过滤消息.主题是由与消息一起发布的点分隔的单词列表.例如,“stock.usd.nyse”或“book.uk.london”或“a ...
- 算法(5)Jump Game
题目:非负数的数组,每个数组元素代表这你能最大跨越多少步,初始在0的位置,问,能不能正好调到数组的最后一位! https://leetcode.com/problems/jump-game/#/des ...
- http请求的过程
http请求格式: http请求格式由四部分组成,分别是:请求行,请求头,空行,消息体,每个部分占一行. 请求行是消息体的第一行,由三部分组成,分别是:请求方法,请求资源的url,http的版本号. ...
- 转:maven常用命令介绍
mvn 3.0.4 创建maven项目命令 mvn archetype:generate -DgroupId=damocles-autocredit -DartifactId=damocles ...