做了一个demo。用到一些css3的动画，还是不太熟练，总结了一下。

 1、 -webkit-font-smoothing: antialiased;      
  • -webkit-font-smoothing: none: 无抗锯齿
  • -webkit-font-smoothing: subpixel-antialiased | default: 次像素平滑
  • -webkit-font-smoothing: antialiased: 灰度平滑
2、    -webkit-perspective: 800px; 设置元素被查看位置的视图：
值： 元素距离视图的距离，以像素计。
使子元素又了3d的效果：
<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
-webkit-perspective:150; /* Safari and Chrome */
}
 
#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: yellow;
-webkit-transform: rotateX(60deg); /* Safari and Chrome */
}
</style>
</head>
 
<body>
 
<div id="div1">
  <div id="div2">HELLO</div>
</div>
 
</body>
</html>
 
没那个，子元素会有动作但是没有3d效果
3、-webkit-transition: all .8s;
过渡属性   transition    可以设置4个属性    transition-property：规定应用过渡的 CSS 属性的名称。   transition-duration：定义效果花费的时间。默认是0   transition-timing-function   ：定义过渡效果时间曲线。默认是“ease”       transition-delay：规定效果的延迟时间。默认是0 
 
可以设置四个：那个过渡（property- 性质- 财产- 财产权- 属性） 、过渡时间（持续时间duration）、过渡样式 、延迟时间
那个过渡：
none 没有属性会获得过渡效果。
all 所有属性都将获得过渡效果。
property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。
 
过渡效果:
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在
 
4.-webkit-transform-style: preserve-3d;
 
2D Transform 方法

  • vt. 改变，使…变形；转换
 
 
一、transform  向元素应用2d或者3d的转换
（1）2d：transform
  • transform属性可用于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放和移动元素，他有几个属性值参数：
  • rotate(旋转)允许你通过传递一个度数值来转动一个对象；
  • scale是一个缩放功能，可以让任一元素变的更大。它使用一个或者两个正数和负数以及小数作为参数；当使用一个参数时表示X轴和Y轴的缩放相同；
  • translate就是基于X和Y 坐标重新定位元素，当使用一个参数时表示X轴和Y轴的参数相同；
  • skew倾斜（ps中的斜切），参数是度数，当使用一个参数时表示X轴和Y轴的参数相同；
  • matrix矩阵变换，就是基于X和Y 坐标重新定位元素，它使用6个参数
transform-origin  允许你改变被转换元素的位置
JavaScript 语法： object.style.transformOrigin="20% 40%"

二、改变元素基点transform-origin
  • transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用；
  • 因为我们元素默认基点就是其中心位置，换句话说我们没有使用transform-origin改变元素基点位置的情况下，transform进行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置进行变化的。
  • 但有时候我们需要在不同的位置对元素进行这些操作，那么我们就可以使用transform-origin来对元素进行基点位置改变，使元素基点不在是中心位置，以达到你需要的基点位置。
  • 下面我们主要来看看其使用规则：

    transform-origin(X,Y):用来设置元素的运动的基点（参照点）。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px，其中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom 。

    • 语法：-moz-transform-origin: [ |  | left | center | right ][ |  | top | center | bottom ] ?
    • transform-origin接受两个参数，它们可以是百分比，em，px等具体的值，也可以是left,center,right，或者 top,center,bottom等描述性参数 ;
    • top left | left top 等价于 0 0；
    • top | top center | center top 等价于 50% 0
    • right top | top right 等价于 100% 0
    • left | left center | center left 等价于 0 50%
    • center | center center 等价于 50% 50%（默认值）
    • right | right center | center right 等价于 100% 50%
    • bottom left | left bottom 等价于 0 100%
    • bottom | bottom center | center bottom 等价于 50% 100%
    • bottom right | right bottom 等价于 100% 100%
 
 
其中 left,center right是水平方向取值，对应的百分值为left=0%;center=50%;right=100%
而
top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%;
如果只取一个值，表示垂直方向值不变。
注：transform-origin并不是transform中的属性值，他具有自己的语法。
但是他要结合transform才能起作用
三、CSS3 transform-style 属性
 

规定被嵌套元素如何在 3D 空间中显示。

规定被嵌套元素如何在 3D 空间中显示。

4、perspective 属性
  规定 3D 元素的透视效果。
5、 perspective-origin
perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。
 
当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身。
 
注释：该属性必须与 perspective 属性一同使用，而且只影响 3D 转换元素。
6、backface-visibility 属性
backface-visibility 属性定义当元素不面向屏幕时是否可见。
1、动画  @keyframes   然后使用animation：第一个参数就行@keyframes 定义的参数

animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]*

css3 转换transfrom 过渡transition 和两个@的更多相关文章

  1. CSS3 转换、过渡和动画

    一.转换 1.属性:transform 取值:none/transform-function(转换函数) 注意:如果要实现多个转换函数的话,可以用空格分开若干transform-function 2. ...

  2. css3系列之过渡transition

    transition 设置变换属性的过渡效果,举个例子,也就是说, 如果从width100px 变成 width200px,要以什么方式进行变换,速度,时间,类型等. transition trans ...

  3. CSS3动画基本的转换和过渡

    理论知识不扎实,在一定程度上能体现你解决问题的能力.今天我们拿CSS3动画来说,简单回忆下他的一些基本属性,这些我们在平常应用中会经常用到. 常用动画属性: transform:translate(x ...

  4. CSS3之过渡Transition

    CSS3中的过渡Transition有四个中心属性:transition-property.transition-duration.transition-delay和transition-timing ...

  5. CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换

    边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...

  6. CSS3的变形transform、过渡transition、动画animation学习

    学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...

  7. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  8. css3 转换 过渡 及动画

    转换transform: 通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸.您可以使用 2D 或 3D 转换来转换您的元素 2D转换属性: transform 向元素应用 2D 或 ...

  9. 常用到用css3实现的转换，过渡和动画

    为什么要用css动画替换js动画 导致JavaScript效率低的两大原因:操作DOM和使用页面动画. 通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果,导致js效率低的两个因素都包括在 ...

随机推荐

  1. MFC架构

    MFC的六大关键技术: 1)MFC程序的初始化过程 2)消息映射 3)运行时类型识别(RTTI) 4)动态创建 5)永久保存 6)消息传递 一.MFC的初始化过程: MFC的架构组成: 1.要有CWi ...

  2. 20145207《Java程序设计》第6周学习总结

    教材学习内容总结 一．输入/输出 InputStream与Outputstream • 串流设计的概念 从应用程序角度看,将数据从来源取出,可以使用输入串流,将数据写入目的地,可以使用输出串流:在Ja ...

  3. Java基础(38):Calendar类的应用（优于Date类）

    Calendar 类的应用 Date 类最主要的作用就是获得当前时间,同时这个类里面也具有设置时间以及一些其他的功能,但是由于本身设计的问题,这些方法却遭到众多批评,不建议使用,更推荐使用 Calen ...

  4. mysql explain

    我们使用EXPLAIN解析SQL执行计划时,如果有下面几种情况,就需要特别关注下了: 首先看下 type 这列的结果,如果有类型是 ALL 时,表示预计会进行全表扫描(full table scan) ...

  5. ORA-12154的原因

    一个很难想到的引起ORA-12154的原因         使用OracleClient.OracleConnection时(我连的是Oracle 9i,其他版本未知),如果你的执行目录太长或者有括号 ...

  6. 夺命雷公狗---node.js---14之DNS

    node下如果想域名解析是需要通过apache或者ng的反向版定才可以实现的,但是他也给我们留下了哟套DNS操作方法: /** * Created by leigood on 2016/8/30. * ...

  7. PAT乙级 1014. 福尔摩斯的约会 (20)

    1014. 福尔摩斯的约会 (20) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 大侦探福尔摩斯接到一张奇怪的 ...

  8. zw·准专利·高保真二值图细部切分算法

    zw·准专利·高保真二值图细部切分算法     高保真二值图细部切分算法,是中国字体协会项目的衍生作品.     说准专利算法,是因为对于图像算法的标准不了解,虽然报过专利,但不是这方面的,需要咨询专 ...

  9. 在Debian下安装ibus输入法

    sudo apt-get install ibus ibus-pinyin im-switch sudo apt-get install ibus-googlepinyin im-switch -s ...

  10. delphi 与 C++的基本语法区别

    [1]“=”符号 (1)“=”作为比较符.但是,当定义const常量时,“=”又表示赋值符号.而“:=”作为赋值符号. (2)“=”只表示赋值符号 [2]结构体 (1)record 作为结构体 (2) ...