css3jianm,CSS3转换（transform）

2D转换：

2D转换的方法：

函数

描述

例子:不同的浏览器 注意加前缀

translate()

沿x轴或y轴或xy轴移动元素

transform: translate(50px,100px);

rotate()

元素旋转角度，负为逆时针

transform: rotate(30deg);

scale()

元素尺寸的增加减少

transform: scale(2,4);

skew()

元素翻转一定的角度

transform: skew(30deg,20deg);

matrix()

把所有 2D 转换方法组合在一起：六个值的矩阵

transform:matrix(0.866,0.5,-0.5,0.866,0,0);

实例：

div

{

width:100px;

height:75px;

background-color:yellow;

border:1px solid black;

}

div#div2

{

transform:matrix(0.866,0.5,-0.5,0.866,0,0);

-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */

-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */

-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */

-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */

}

你好。这是一个 div 元素。

你好。这是一个 div 元素。

转换属性：

属性

描述

transform

向元素应用 2D 或 3D 转换。

transform-origin

允许你改变被转换元素的位置。

3D转换：

3D转换的方法：

函数

描述

translate3d(x,y,z)

沿xyz轴移动元素

translate3d(x)

沿x轴移动元素

translate3d(y)

沿y轴移动元素

translate3d(z)

沿z轴移动元素

rotate3d(x,y,z,angle)

元素旋转角度，负为逆时针

rotateX(angle)

x轴的旋转

rotateY(angle)

Y轴的旋转

rotateZ(angle)

Z轴的旋转

scale3d(x,y,z)

元素尺寸的增加减少:缩放转换

scaleX(x)

元素尺寸的增加减少

scaleY(y)

元素尺寸的增加减少

scaleZ(z)

元素尺寸的增加减少

perspective(n)

转换元素的透视视图

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

把所有 3D 转换方法组合在一起：使用 16 个值的 4x4 矩阵。

3D转换的属性：

属性

描述

transform

向元素应用 2D 或 3D 转换。

transform-origin

改变被转换元素的位置

transform-style

规定被嵌套元素如何在3D中显示 (preserve-3d)子元素保留3D位置

perspective

规定3D元素的透视效果

perspective-origin

规定元素的底部位置

backface-visibility

定义元素在不面对屏幕时 是否可见

例子：

HTML5/CSS3 3D文字特效 文字外翻效果演示地址

@import url(https://fonts.googleapis.com/css?family=Lato:900);

*, *:before, *:after {

box-sizing: border-box;

}

body {

font-family: 'Lato', cursive;

}

div.foo {

width: 90%;

margin: 0 auto;

text-align: center;

}

.letter {

display: inline-block;

font-weight: 900;

font-size: 8em;

margin: 0.2em;

position: relative;

color: #00B4F1;

/*transform-style: preserve-3d;*/

/*perspective: 400;*/

z-index: 1;

}

.letter:before, .letter:after {

position: absolute;

content: attr(data-letter);

/*定义元素转换的位置 即轴*/

transform-origin: top left;

top: 0;

left: 0;

}

.letter, .letter:before, .letter:after {

transition: all 0.3s ease-in-out;

}

.letter:before {

color: #fff;

text-shadow: -1px 0px 1px rgba(255, 255, 255, .8), 1px 0px 1px rgba(0, 0, 0, .8);

z-index: 3;

/*使页面的初始效果的 右边有露出些底色*/

/*沿Y轴 逆时针旋转15度*/

transform: rotateX(0deg) rotateY(-15deg) rotateZ(0deg);

}

.letter:after {

color: rgba(0, 0, 0, .11);

z-index: 2;

/*x放大1.08 ，y轴不变 沿y轴倾斜一度*/

/*阴影部分*/

transform: scale(1.08, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 1deg);

}

.letter:hover:before {

color: #fafafa;

transform: rotateX(0deg) rotateY(-40deg) rotateZ(0deg);

}

.letter:hover:after {

transform: scale(1.08, 1) rotateX(0deg) rotateY(40deg) rotateZ(0deg) skew(0deg, 22deg);

}

Q

I

N

G

M

E

I