Transform 详细讲解

CSS3 2D Transform 详细讲解

在一个二维或三维空间，元素可以被扭曲、移位或旋转。只不过2D变形工作在X轴和Y轴，也就是大家常说的水平轴和垂直轴；而3D变形工作在X轴和Y 轴之外，还有一个Z轴。这些3D变换不仅可以定义元素的长度和宽度，还有深度。我们将首先讨论元素在2D平面如何变换，然后我们在进入3D变换的讨论。

CSS3 2D变换让Web设计师有了更多的自由来装饰和变形HTML组件。同时让设计师有更多的功能装饰文本和更多动画选项来装饰Div元素。在CSS3 2D变形中主要包含的一些基本功能如下。

相关标签：CSS3动画  ， CSS3

位移translate()函数

大家不要误会了，translate并不是指翻译外国语言，在这里translate是一种方法，将元素向指定的方向移动，类似于position中的relative。可以简单的理解为，使用translate()函数，你可以把元素从原来的位置移动，而不影响在X、Y轴上任何组件。

translate()函数的使用语法如下：

  1. translate(tx)

或者

  1. translate(tx,ty)

translate()函数可以取一个值tx，也可以同时取两个值tx和ty，其取值具体说明如下：

  • tx是一个代表X轴（横坐标）移动的向量长度，当其值为正值时，元素向X轴右方向移动，反之其值为负值时，元素向X轴左方向移动。
  • ty是一个代表Y轴（纵向标）移动的向量长度，当其值为正值时，元素向Y轴下方向移动，反之其值为负值时，元素向Y轴上方向移动。如果ty没有显式设置时，相当于ty=0。

结合起来，translate()函数移动元素主要有以下三种移动：

  • 水平移动：向右移动translate(tx,0)和向左移动translate(-tx,0)；
  • 垂直移动：向上移动translate(0,-ty)和向下移动translate(0,ty);
  • 对角移动：右下角移动translate(tx,ty)、右上角移动translate(tx,-ty)、左上角移动translate(-tx,-ty)和左下角移动translate(-tx,ty)。

现在我们来看一些有关于translate()函数的简单例子。我们使用transform:translate(tx,ty)将一个对象从其原始位置移动，其中tx值为正值和ty值等于0时，对像向右移动：

HTML

  1. <div>
  2. <img src="images/cardKingClub.png" alt="" width="70" height="100" />
  3. <img src="images/cardKingClub.png" alt="" width="70" height="100" />
  4. </div>

CSS

  1. div {
  2. width: 500px;
  3. height: 300px;
  4. margin: 30px auto;
  5. position: relative;
  6. background: url(images/bg-grid.jpg) no-repeat center center;
  7. background-size: 100% 100%;
  8. }
  9. //默认图片都在容器中水平垂直居中
  10. div img {
  11. position: absolute;
  12. top: 50%;
  13. left: 50%;
  14. margin-left: -35px;
  15. margin-top: -50px;
  16. }
  17. div img:nth-child(1){
  18. opacity: .5;
  19. z-index: 1;
  20. }
  21. div img:nth-child(2){
  22. opacity: 1;
  23. z-index: 2;
  24. transform: translate(100px,0);
  25. }

效果如下图所示：

在这个示例中，我们让扑克牌梅花King相对于原点中心位置向右移动100像素。如果仅需让元素向右移动，我们可以省略ty值。换句话说ty值为０时可以省略不写。如此一来，上面的效果等同与：

  1. div img:nth-child(2){
  2. opacity: 1;
  3. z-index: 2;
  4. transform: translate(100px);
  5. }

要将一个对象移动到左边，我们只需要输入一个负数的X轴坐标，而Y坐标应保持０，基于前面的实例，我们将扑克牌向左边移动100像素：

  1. div img:nth-child(2){
  2. transform: translate(-100px,0);
  3. }

效果如下图所示：

垂直移动一个对象很简单，几乎和水平移动对象相同。唯一的区别是，我们将使用Y轴的值控制对象向上和向下移动位移量。正如我们前面提到的，Y轴的坐 标值为正值时，对像向下移动；反之其坐标值为负值时，对象向上移动。而X轴的坐标值应该保持为０。我们来看一个简单的实例，将一扑克牌向上，向下移动 100像素：

  1. div img:nth-child(1){
  2. opacity: .5;
  3. z-index: 1;
  4. }
  5. div img:nth-child(2){
  6. z-index: 2;
  7. transform: translate(0,-100px);
  8. }
  9. div img:nth-child(3){
  10. z-index: 3;
  11. transform: translate(0,100px);
  12. }

其效果如下图所示：

要让一个元素对角移动，我样将结合X轴和Y轴两坐标的值。根据不同的方向，X轴和Y轴的值可能是正值或是负值。如果我们要将一张扑克牌向右上角移 动，需要将X轴坐标设置为正值，将Y轴从标设置为负值；如果要将一张扑克牌向右下角移动，需要将X、Y轴坐标设置为正值；如果要将一张扑克牌向左上角移 动，需要将X、Y轴坐标设置为负值；如果要将扑克拍向左下角移动，需要将X坐标设置为负值，Y轴坐标设置为正值。

  1. div img:nth-child(1){
  2. opacity: .5;
  3. z-index: 1;
  4. }
  5. div img:nth-child(2){
  6. z-index: 2;
  7. transform: translate(100px,-100px);
  8. }
  9. div img:nth-child(3){
  10. z-index: 3;
  11. transform: translate(100px,100px);
  12. }
  13. div img:nth-child(4){
  14. z-index: 3;
  15. transform: translate(-100px,-100px);
  16. }
  17. div img:nth-child(5){
  18. z-index: 3;
  19. transform: translate(-100px,100px);
  20. }

其效果如下所示：

如果我们要将对象沿着一个方向移动，比如说沿着水平轴或者纵轴移动，可以实使用translate(tx,0)和translate(0,ty)来实现。其实在变形中还为单独一个方向移动对象提供了更简单的方法：

  • translateX()：水平方向移动一个对象。通过给定一个X轴方向的数值指定对象沿水平轴方向的位移。简单点说，对像只向X轴进行移动，如果值为正值，对像向右移动；如果值为负值，对像向左移动。
  • translateY()：纵轴方向移动一个对象。通过给定一个Y轴方向的数值指定对象沿纵轴方向的位移。简单点说，对象只向Y轴进行移动，如果值为正值，对象向下移动；如果值为负值，对像向上移动。

这两个函数和前面介绍的translate()函数不同的是每个方法只接受一个值。所以，transform:translate(-100px,0)实际上等于transform:translateX(-100px);transform:translate(0,-100px)实际上等于transform:translateY(-100px)。

缩放scale()函数

缩放scale()函数让元素根据中心原点对对象进行缩放。默认的值1。因此0.01到0.99之间的任何值，使一个元素缩小；而任何大于或等于1.01的值，让元素显得更大。

缩放scale()函数和translate()函数的语法非常相似，他可以接受一个值，也可以同时接受两个值，如果只有一个值时，其第二个值默认与第一个值相等。例如，scale(1,1)元素不会有任何变化，而scale(2,2)让元素沿X轴和Y轴放大两倍。其使用语法如下：

  1. scale(sx)

或者：

  1. scale(sx,sy)

其取值简单说明如下：

  • sx：用来指定横向坐标（X轴）方向的缩放向量，如果值为0.01~0.99之间，会让对象在X轴方向缩小，如果值大于或等于1.01，对象在Y轴方向放大。
  • sy：用来指定纵向坐标（Y轴）方向的缩放量，如果值为0.01~0.99之间，会让对象在Y轴方向缩小，如果值大于或等于1.01，对象在Y轴方向放大。

这有一个简单的实例：

HTML

  1. <div>
  2. <img src="images/cardKingClub.png" alt="" width="70" height="100" />
  3. <img src="images/cardKingClub.png" alt="" width="70" height="100" />
  4. </div>

CSS

  1. div {
  2. width: 500px;
  3. height: 500px;
  4. margin: 30px auto;
  5. position: relative;
  6. background: url(images/bg-grid.jpg) no-repeat center center;
  7. background-size: 100% 100%;
  8. }
  9. div img {
  10. position: absolute;
  11. top: 50%;
  12. left: 50%;
  13. margin-left: -35px;
  14. margin-top: -50px;
  15. }
  16. div img:nth-child(1){
  17. opacity: .8;
  18. z-index: 2;
  19. border: 1px solid red;
  20. }
  21. div img:nth-child(2){
  22. z-index: 1;
  23. transform: scale(1.5);
  24. }

效果如下所示：

上面的例子将扑克牌放大了1.5倍或是实际尺寸的150%。因为我们同时对X和Y轴方向方大，所以我们只需要给scale()声明一个值。你也可以使用transform:scale(1.5,1.5)实现想相同的效果。

此外如果我们要缩小一个元素，我们会专门使用一个0~0.9999的值，像下面的例子，我们将扑克牌缩放一半，也就是实际尺寸的50%。

  1. div img:nth-child(2){
  2. z-index: ２;
  3. transform: scale(.5);
  4. }

效果如下所示：

但是，要小心，如果你将值设置为“0”时，元素将会消失。我想，如果没必要，你是不会这样做的。当我们仅给scale() 函数只显式设置一个值时，会使对象成正比例放大或缩小。如果需要将对象在X轴和Y轴两个方向设置不同的值。

  1. div img:nth-child(2){
  2. z-index: 2;
  3. transform: scale(.5,1.2);
  4. }

效果如下所示：

scale()函数和translate()函数极其相似，除了能通过scale()函数使用元素水平方向和垂直方向同时缩放（也就是元素沿X轴和Y轴同时缩放）之外，也可以使元素仅沿着X轴或Y轴方向缩放：

  • scaleX()：相当于scale(sx,1)。表示元素只在X轴（水平方向）缩放元素，其默认值是1。
  • scaleY()：相当于scale(1,sy)。表示元素只在Y轴（纵横方向）缩放元素，其默认值是１。

通过上面的介绍，让我们不由想起图形编辑软件中的缩放工具，对对象进行缩放效果。在CSS3中的scale()函数和图形编辑软件中的缩放工具几乎相同：

在scale()函数中，取值除了可以取正值之外，同时还可以取负值。只不过取负值时，会先让元素进行翻转，然后在进行缩放。

HTML

  1. <div class="wrapper">
  2. <div>Scale(-1.5)</div>
  3. </div>

CSS

  1. .wrapper {
  2. width: 500px;
  3. height: 400px;
  4. margin: 30px auto;
  5. position: relative;
  6. background: url(http://www.w3cplus.com/sites/default/files/blogs/2013/1311/bg.jpg) repeat center center;
  7. }
  8. .wrapper > div {
  9. position: absolute;
  10. background-color: hsla(220,20%,20%,.3);
  11. top: 50%;
  12. left: 50%;
  13. margin-left: -100px;
  14. margin-top: -100px;
  15. width: 198px;
  16. height: 198px;
  17. border: 1px dotted orange;
  18. text-align: center;
  19. line-height: 198px;
  20. color: #fff;
  21. font-size: 20px;
  22. transform: scale(-1.5);
  23. }

效果如下：

scale()函数对元素进行缩放时，都是以元素的中心为基点，但可以通过transform-origin来改变元素的基点。

旋转rotate()函数

旋转rotate()函数通过指定的角度参数对元素根据对象原点指定一个2D旋转。它主要在二维空间内进行操作，接受一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。

rotate()函数的使用很简单，其基本语法如下：

  1. rotate(a);

rotate()函数只接受一个值，其属性值简单说明如下：

  • a：代表的是一个旋转的角度值。其取值可以是正的，也可以是负的。如果取值为正值时，元素默认之下相对元素中心点顺时针旋转；如果取值为负值时，元素默认之下相对元素中心点逆时针旋转。

接下来，我们来看一个简单的例子，扑克牌相对于元素中心点顺时针旋转45度：

HTML

  1. <div>
  2. <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="70" height="100" />
  3. <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="70" height="100" />
  4. </div>

     

CSS

  1. div {
  2. width: 500px;
  3. height: 300px;
  4. margin: 30px auto;
  5. position: relative;
  6. background: url(http://www.w3cplus.com/sites/default/files/blogs/2013/1311/bg.jpg) repeat center center;
  7. }
  8. div img {
  9. position: absolute;
  10. top: 50%;
  11. left: 50%;
  12. margin-left: -70px;
  13. margin-top: -100px;
  14. }
  15. div img:nth-child(1){
  16. z-index: １;
  17. opacity: .6;
  18. }
  19. div img:nth-child(2){
  20. z-index: 2;
  21. transform: rotate(45deg);
  22. }

     

效果如下所示：

在默认之下，rotate()函数旋转元素是相对于元素中心点进行旋转，同样，我们可以通过transform-origin属性重置元素的旋转原点：

  1. div img:nth-child(2){
  2. z-index: 2;
  3. transform-origin: top left;
  4. transform: rotate(45deg);
  5. }

     

基于上例，修改旋转原点后的效果就完全不同了：

rotate()函数也同样可以和图形编辑软件中的旋转工具的功能对比起来理解。如下图所示的是CSS3中rotate()函数在2D中的旋转与Photoshop制作软件中旋转工具的对比：

倾斜skew()函数

倾斜skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。语法格式如下：

  1. skew(ax)

或者

  1. skew(ax,ay)

其属性值说明如下：

  • ax：用来指定元素水平方向（X轴方向）倾斜的角度。
  • ay：用来指定元素垂直方向（Y轴方向）倾斜的角度。如果未显式的设置这个值，其默认为０。

这里有一个简单的例子：

  1. div img:nth-child(1){
  2. z-index: １;
  3. opacity: .6;
  4. }
  5. div img:nth-child(2){
  6. z-index: 2;
  7. transform: skew(30deg,10deg);
  8. }

     

效果如下图所示：

倾斜skew()函数和CSS3中变形中的translate()、scale()函数一样，除了可以使用skew(tx,ty)函数让元素相于元素中心为原点在X轴和Y轴倾斜之外，还可以使用skewX()和skewY()函数让元素只在水平或垂直方向倾斜。

  • skewX()：相当于skew(ax,0)和skew(ax)。按给定的角度沿X轴指定一个倾斜变形。skewX()使元素以其中心为基点，并在水平方向（X轴）进行倾斜变形。
  • skewY()：相当于skew(0,ay)。按给定的角度沿Y轴指定一个倾斜变形。skewY()用来设置元素以其中心为基点并给定的角度在垂直方向（Y轴）倾斜变形。

在默认情况之下，skew()函数都是以元素的原中心点对元素进行倾斜变形，但是我们同样可以根据transform-origin属性，重新设置元素基点对元素进行倾斜变形。另外，skew()函数和制图软件中的变形工具所起作用类似。

矩阵matrix()函数

CSS3中Transform让我们操作变形变得很简单，诸如，位移translate()函数、缩放scale()函数、旋转rotate()函数和倾斜skew()函数。这几个函数很简单，也很方便，但是变形中的矩阵函数matrix()对于我们来说就不常使用了。

当然，Web设计师可以使用rotate()、skew()、scale()和translate()函数来满足他们的变形需要，那我们为什么要劳烦矩阵matrix()呢？在CSS3中的变形函数都可以使用matrix()函数来代替，例如：

使用矩阵可以实现一个复杂的2D变形，如下：

  1. #object {
  2. transform-origin: 0 0;
  3. transform: rotate(15deg) translateX(230px) scale(1.5, 2.6) skew(220deg, -150deg) translateX(230px)
  4. }

     

使用一个矩阵matrix()规则变成如下：

  1. #object {
  2. transform-origin: 0 0;
  3. transform: matrix(1.06, 1.84, 0.54, 2.8, 466px, 482px)
  4. }

     

你也许很讨厌matrix()函数中的一大堆数字，但是要整明白CSS3变形中的matrix()函数，我们先要了解矩阵matrix是怎么一回事。接下来我们一起探讨一下transform中的matrix。

在CSS3中变形的matrix分为两种，一种是2D矩阵，另外一种是3D矩阵。我们就先从简单的入手——2D矩阵matrix。

CSS3中的2D矩阵matrix总共提供了六个参数:a,b,c,d,e和f，其基本写法如下：

matrix(a,b,c,d,e,f)

实际上，这六个参数，对应的矩阵就是：

在开始之前，首先来复习下一个简单的线性代数知识：矩阵与向量乘法。太复杂的我们用不到，我们只需要了解三维向量与3 x 3矩阵的乘积：

弄明白3x3的矩阵之后，即可知道matrix计算方法。x和y是元素初始原点的坐标，x’和y’则是通过矩阵变换后得到的新原点坐标。通过中间的 那个3x3的变换矩阵，对原先的坐标施加变换，就能得到新的坐标了。依据矩阵变换规则即可得到：x’=ax+cy+e和y’=bx+dy+f：

上面的一大堆的字母让你看了犯迷糊，为了让人更好的理解，我们一起来看一个简单的例子。假设矩阵参数如下：

transform: matrix(1,0,0,1,50,50);/*a=1,b=0,c=0,d=1,e=50,f=50*/

现在，我们根据这个矩阵偏移元素的中心点，假设是(0,0)，即x=0，y=0。

我们可以按照上面介绍的矩阵方式，将这个列成矩阵：

于是，变换后的原点位置x’和y’可以根据矩阵向量的计算规则计算出来：

也就是计算得出x’=50，y’=50。即元素的原点由(0,0)移动到(50,50)的位置。实际上transform:matrix(1,0,0,1,50,50);就等同时transform: translate(50px,50px)。

HTML

  1. <div class="matrix">
  2. <img src="images/cardKingClub.png" alt="" width="70" height="100" />
  3. <img src="images/cardKingClub.png" alt="" width="70" height="100" />
  4. </div>
  5. <div class="translate">
  6. <img src="images/cardKingClub.png" alt="" width="70" height="100" />
  7. <img src="images/cardKingClub.png" alt="" width="70" height="100" />
  8. </div>

     

CSS

  1. .matrix img:nth-child(2){
  2. z-index: 2;
  3. transform: matrix(1,0,0,1,50,50);
  4. }
  5. .translate img:nth-child(2){
  6. z-index: 2;
  7. transform: translate(50px,50px);
  8. }

     

效果如下所示：

通过一些篇幅介绍了矩阵的一些基础知识，并通过一个简单的实例用matrix()函数实现translate()的位移效果。接下来我们分别看看CSS3变形中matrix()和各变形函数之间的关系。

translate()转换成matrix()

首先来看最简单的位移translate()函数。我们都知道transform:translate(tx,ty)的基本含义是将一个元素的显示位置平移tx,ty。在矩阵变形中，translate的matrix的参数为：

  1. matrix(1,0,0,1,tx,ty)/*tx,ty分别对应X和Y轴的增量*/

其对应的矩阵图：

由此公式可知：transform:translate(100px,100px)；即对应着transform:matrix(1,0,0,1,100,100)；推算出的结果：x’=x+tx=x+100；y’=y+ty=y+100。

scale()转换成matrix()

transform:scale(sx,sy)将一个元素按指定的倍数进行缩放，它对应的矩阵是：

  1. matrix(sx*x,0,0,sy*y,0,0);/*sx和sy分别对应X轴和Y轴的缩放比率*/

其对应的矩阵图：

由此公式可知：transform:scale(1.5,1.5);及对应着transform:matrix(1.5,0,01.5,0,0);推算出的结果：x’=x*sx=1.5*x；y’=y*sy=1.5*y。

rotate()转换成matrix()

transform:rotate(a)将一个元素按指定的角度旋转，它对应的矩阵是：

  1. matrix(cos(a),sin(a),-sin(a),cos(a),0,0)；/*cos(a)和sin(a)是指旋转度转*/

由此公式可知：transform:rotate(45deg);及对应着transform:matrix(0.53,0.85,-0.85,0.53,0,0);[sin(45’)=0.85,cos(45’)=0.53]。推算出来的结果：x’=cos(a) x – sin(a)*y=cos(45)*x – sin(45)*y；y’=sin(a)*x + cos(a)*y = sin(45)*x + cos(45)*y。

skew()转换成matrix()

transform:skew(ax,ay)将一个元素按指定的角度在X轴和Y轴倾斜，它对应的矩阵是：

  1. matrix(1,tan(ay),tan(ax),1,0,0)/*tan(ax)和tan(ay)是对应的倾斜角度*/

其对应的矩阵图：

由此公式可知：transform:skew(45deg)，对应着transform:matrix(1,0,1,1,0,0)，其中tan(45’)=1。推算出来的结果：x’=x + tan(a)*y；y’=tan(a)*x + y。

上面演示的是CSS3中常见的变形与矩阵的关系，除了上面演示的之外，还有其他的一些。下图就是所有CSS3变换与矩阵等价的关系图：

matrix()实现镜像

在制图软件中变形工具除了旋转、倾斜、位移、缩放等还有镜向（水平镜向、垂直镜向）：

但镜像对称在CSS3变形中没有相应的简化操作。只能通过矩阵matrix()来实现。通过前面的内容介绍，我们清楚的知道，元素变形的原点是其中 心点（在没有显式的重置之外），那么这个镜向的原点也不例外。因为该轴永远经过原点，因此，任意对称轴都可以用y=k*x直线表示。则matrix表示就 是：

  1. matrix((1-k^2)/(1+k^2),2k / (1 + k^2),2k/(1+k^2),(k^2-1)/(1+k^2),0,0)

这个如何得到的呢？我们来看看实现的过程。如下图所示，已经y=k*x，并且知道点(x,y)，求其对称点（x’,y’）的坐标位置：

很简单，一是垂直，二是中心点在轴线上，因此有：

  1. (y-y‘) / (x - x‘) = -1/ k → ky-ky‘ = -x+x‘
  2. (x + x‘) / 2 * k = y + y‘ → kx+kx‘ = y+y‘

     

很简单的，把x’和y’提出来，就有：

  1. x‘ = (1-k^2)/(k^2+1) *x + 2k/(k^2+1) *y;
  2. y‘ = 2k/(k^2+1) *x + (k^2-1)/(k^2+1) *y;

     

再结合矩阵公式：

  1. x‘ = ax+cy+e;
  2. y‘ = bx+dy+f;

     

我们就可以得到：

  1. a = (1-k^2)/(k^2+1);
  2. b = 2k/(k^2+1);
  3. c = 2k/(k^2+1);
  4. d = (k^2-1)/(k^2+1);

     

也就是上面matrix矩阵中的参数值。

CSS3 2D Ttransform兼容性

CSS3的2D变形到目前为止在主流浏览器中得到较好的支持.CSS3的2D变换虽然得到众多主流浏览器的支持，但在实际使用的时候需要添加浏览器各自的私有属性：

  • IE9中使用2D变形时，需要添加-ms-私有属性，在IE10+版本开始支持标准版本。
  • Firefox3.5至Firefox15.0版本需要添加-moz-的私有属性，在Firefox16+版本开始支持标准版本。
  • Chrome4.0+开始支持2D变形，在实际使用的时候需要添加-webkit-私有属性。
  • Safari3.1+开始支持2D变形，在实际使用的时候需要添加-webkit-私有属性。
  • Opera10.5+开始支持2D变形，在实际使用的时候需要添加-o-私有属性，但在Opera12.1版本不需要添加私有属性，不过在Opera15.0+版本需要添加私有属性-webkit-私有属性。
  • 移动设备iOS Safari3.2+、Android Browser2.1+、Blackberry Browser7.0+、Opera Mobile14.0+、Chrome for Android25.0+需要添加私有属性-webkit-，而Opera Mobile11.0至Opera Mobile12.1和Firefox for Android19.0+不需要使用浏览器私有属性。

via w3cplus

时间： 2024-10-03 03:10:06

Transform 详细讲解的相关文章

Spark SQL操作详细讲解

一. Spark SQL和SchemaRDD 关于Spark SQL的前生就不再多说了,我们只关注它的操作.但是,首先要搞明白一个问题,那就是究竟什么是SchemaRDD呢?从Spark的Scala API可以知道org.apache.spark.sql.SchemaRDD和class SchemaRDD extends RDD[Row] with SchemaRDDLike,我们可以看到类SchemaRDD继承自抽象类RDD.官方文档的定义是"An RDD of Row objects tha

IPsec 详细讲解和在企业网中的应用案例

IPsec 详细讲解和在企业网中的应用案例 一.IPsec 的简介 IPsec(IP Security)是IETF 制定的三层隧道加密协议,它为Internet 上传输的数据提供了高质量的.可互操作的.基于密码学的安全保证.特定的通信方之间在IP 层通过加密与数据源认证等方式,提供了以下的安全服务: ① 数据机密性(Confidentiality):IPsec 发送方在通过网络传输包前对包进行加密. ② 数据完整性(Data Integrity):IPsec 接收方对发送方发送来的包进行认证,以

[iOS]数据库第三方框架FMDB详细讲解

[iOS]数据库第三方框架FMDB详细讲解 初识FMDB iOS中原生的SQLite API在进行数据存储的时候,需要使用C语言中的函数,操作比较麻烦.于是,就出现了一系列将SQLite API进行封装的库,例如FMDB.PlausibleDatabase.sqlitepersistentobjects等. FMDB是一款简洁.易用的封装库.因此,在这里推荐使用第三方框架FMDB,它是对libsqlite3框架的封装,用起来的步骤与SQLite使用类似,并且它对于多线程的并发操作进行了处理,所以

iOS KVC详细讲解

iOS KVC详细讲解 什么是KVC? KVC即NSKeyValueCoding,就是键-值编码的意思.一个非正式的 Protocol,是一种间接访问对象的属性使用字符串来标识属性,而不是通过调用存取方法,直接或通过实例变量访问的机制. 以上就是KVC的理论,面试时,如实回答就可以啦! 使用KVC说明 KVC间接修改对象属性时,会自动判断对象属性的类型,完成相应的转换. KVC按键值路径取值时,如果对象不包含指定的键值,那么就会自动进入对象内部,查找对象属性. KVC可以嵌套按照键值路径取值.

详细讲解Android的网络通信（HttpUrlConnection和HttpClient）

前言,Android的网络通信的方式有两种:使用Socket或者HTTP,今天这一篇我们详细讲解使用HTTP实现的网络通信,HTTP又包括两种方式编程方式: (1)HttpUrlConnection: (2)HttpClient: 好了,我们直接进行讲解,当然之前也会有一部分有关Android网络通信的其他知识,我们也应该了解. 一.获取网络状态的方法 (1)MainActivity.java中的关键代码 1 2 3 4 5 6 7 8 //网络管理类,可以判断是否能上网,以及网络类型     

Android自定义相机超详细讲解

Android自定义相机超详细讲解 转载请标明出处: http://blog.csdn.net/vinicolor/article/details/49642861: 由于网上关于Android自定义相机的文章写得不是太详细,Google官方的文档又说得不太容易理解,所以今天我来详细讲解一下Android自定义相机. 这篇文章主要写给一些刚刚接触Android的那些看官方API困难以及不太了解Android机制的同学们,所以熟练开发者可以绕道了. 最近在使用Camera类的时候发现居然被弃用了,

二进制编码-详细讲解

负数: 原码就是原来的表示方法 反码是除符号位(最高位)外取反 补码=反码+1 以前学习二进制编码时,老师讲了一堆堆的什么原码啊反码啊补码啊xxxx转换啊,还有负数的表示方式啊 总是记不零清,终于从网上找到了一种比较好的讲解方式,保存再share一下,不过为了系统化讲解,又找来了一些编码的基础知识,如果只想看负数编码记忆法,请跳转到 1.如果你不知道二进制怎么编码,请继续,否则请跳到2 1字节 = 8位,所以它能表示的最大数当然是8位都是1(既然2进制的数只能是0或1,如果是我们常见的10进制,

JSP的静态包含和动态包含详细讲解 （一）

JSP包含有两种方式:静态包含和动态包含.下面我们将通过JSP运行的特点(转换为servlet再执行)来比较二者的区别. 一.静态包含  <%@include file="url"%> 我们先写一个正常的小项目,来看下静态包含是如何运行的. 测试一: top.jsp页面: <%@ page language="java" contentType="text/html; charset=UTF-8"     pageEncodin

（三）Jquery Mobile按钮详细讲解

Jquery Mobile按钮详细讲解 一.JM按钮说明 按钮如下图所示           1.HTML5中的button      效果:      2. JM中的普通button              此中显示和HTML5是系统的.      3.JM中button内联样式 data-inline      说到内联样式和block样式,大家估计都不知道怎么回事,内联inline是说,外面的框会根据内部的文字来改变,block则正好相反,上面展示的按钮占据了整个一行的效果,现在我们需要