css3变换与过度

CSS3 2D 转换

---

css3转换

通过 CSS3 2d转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

---

 浏览器支持

属性	浏览器支持
transfrom	IE10 (IE9需要前缀-ms-)	火狐浏览器	欧朋浏览器	谷歌浏览器 需要前缀 -webkit-。	苹果浏览器 需要前缀 -webkit-。

---

2D Transform 方法

函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

---

 matrix 2D转换:使用六个值的矩阵

给6个值，可以让一个图形进行变换

 

                                

           

.test{
transform: matrix(0,0.8,0.3,1,0.6,0); 
}

 translate 2D转换:沿着 X 和 Y 轴移动元素。

translate可以让元素进行X与Y轴的移动

X轴正为→，负为←，Y轴正为↓，负为↑

我们也可以使用translateY与translateX进行单独的X轴与Y轴的移动

 w

.test{
transform: translate(40px,0);
}

scale 2D转换:沿着X轴与Y轴缩放转换

 scale可以让元素进行X轴与Y轴的缩放

我们也可以使用scaleY与scaleX进行单独的X轴与Y轴的缩放

 

   

.test{
transform: scale(1.2,1.6);
}

rotate 2D转换:进行旋转

 rotate可以让元素进行旋转，需要一个角度

 

 

.test{
transform:rotate(30deg);
}

 skew 2d转换:倾斜转换

 skew可以让元素进行倾斜

我们也可以使用skewY与skewX进行单独的X轴与Y轴的缩放

 

 

.test{
transform: skew(10deg,30deg);
}

CSS3 3D 转换

---

css3 3D转换

CSS3 允许您使用 3D 转换来对元素进行格式化。

---

 浏览器支持

属性	浏览器支持
transfrom	IE10 (IE9需要前缀-ms-)	火狐浏览器	欧朋浏览器  不支持	谷歌浏览器 需要前缀 -webkit-。	苹果浏览器 需要前缀 -webkit-。

---

转换属性

下面的表格列出了所有的转换属性：

属性	描述
transform	向元素应用 2D 或 3D 转换。
transform-origin	允许你改变被转换元素的位置。
transform-style	规定被嵌套元素如何在 3D 空间中显示。
perspective	规定 3D 元素的透视效果。
perspective-origin	规定 3D 元素的底部位置。
backface-visibility	定义元素在不面对屏幕时是否可见。

---

3D 转换方法

函数	描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。

 translateX:X轴的3D旋转

X轴3D旋转360度

 

 

.test{
transform:rotateX(360deg);
}

translateY:Y轴的3D旋转

Y轴3D旋转360度

 

     

.test{
transform:rotateY(360deg);
}

translateZ:Z轴的3D旋转

Z轴3D旋转360度

 

       

.test{
transform:rotateZ(360deg);
}

CSS3 过渡

---

css3 过渡

通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

---

 浏览器支持

属性	浏览器支持
transfrom	IE10 (IE9需要前缀-ms-)	火狐浏览器	欧朋浏览器	谷歌浏览器 Chrome 25 以及更早的版本，需要前缀 -webkit-。	苹果浏览器 需要前缀 -webkit-。

---

过渡是什么？

CSS3 过渡是一个从一种元素的样式逐渐变为另外一种样式的一种效果

怎么添加过渡？

要添加过渡，需要写出需要过渡的效果名和时间，还可以添加一些控制过渡的特殊东西

如果要添加多个过渡，需要用逗号隔开，并写出效果名和时间，例如：margin 2s , height 2s;

---

过渡属性

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。
transition-delay	规定过渡效果何时开始。默认是 0。

---

一个简单过渡的例子

 这里使用transition做了一个改变宽简单的过渡

 

    .tblock{
        width: 100px; height:100px;
        background-color: black;
        transition: width 1s;
    }
    .transition:hover{    
        width: 200px;
    }

<div class="block transition"></div>

 过渡和变换都不支持博客园发布后？？？