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轴的移动
.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; } 过渡和变换都不支持博客园发布后？？？