transform3D

transform 3D变换[位移、缩放、旋转]

    transform-style: flat | preserve-3d;//设置在父元素

A . 旋转rotate3d()

使用方法:

    transform : rotate3d(45deg,45deg,45deg);
    transform : rotateX(45deg);
    transform : rotateY(45deg);
    transform : rotateZ(45deg);

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

B . 位移:translate3d()

transform: translate3d(50px,50px 50px);
transform: translateZ(tz)

transform: translate3d(100px,100px,100px);

透视:perspective

perspective: 200px;

描述:CSS3 3D transform的透视点是在浏览器的前方,translateZ的功能就是让元素在自己的眼前或近或远.

特点:translateZ值小于200的时候越靠近200越大，等于200铺满整屏，大于200看不到

变形元素上定义[transform]:每个子元素都有自己的透视点，看到一样
#darkred .box {
    background-color: darkred;
    transform: perspective(600px) rotateY(45deg);
}
父元素上定义:整个父元素作为透视节点，看到的方块不同
#darkblue {
    perspective: 600px;
}
perspective-origin: 0 0;
视点聚点:默认就是所看舞台或元素的中心

C . 缩放:scale3d()

使用方法:

transform : scaleZ(0.2);
transform : scale3d(0.1,0.2,0.2);

transform: scaleZ(2) rotateX(45deg);

transform: scaleZ(2) rotateY(45deg);

transform: scale3d(0.5,0.5,2) rotateX(45deg);

D . 矩阵matrix3d(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1)

    transform : matrix3d(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1) ;

transform: matrix3d(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1);

transform: matrix3d(2, 0, 0, 0, 2, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1);

transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 2, 0, 1, 0, 0, 0, 0, 1);

transform: matrix3d(1, 2, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);

transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 2, 1, 0, 0, 0, 0, 1);

transform: matrix3d(1, 0, 2, 0, 0, 1, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1);

transform: matrix3d(1, 0, 0, 0, 0, 1, 2, 0, 0, 1, 1, 0, 0, 0, 0, 1);

<div id="stage" class="stage_area">
    <div id="container" class="container" style="-webkit-transform: rotateY(80deg)"><div>
</div>
.stage_area {
    width: 900px;
    min-height: 100px;
    margin-left: auto;
    margin-right: auto;
    padding: 100px 50px;
    perspective: 500px;
    position: relative;
}

.container {
    width: 128px;
    height: 100px;
    margin-left: -64px;
    transition: transform 1s;
    transform-style: preserve-3d;
    position: absolute;
    left: 50%;
    border: 1px #f00 solid;
}

.piece {
    width: 128px;
    box-shadow: 0 1px 3px rgba(0,0,0,.5);
    transition: opacity 1s, transform 1s;
    position: absolute;
    bottom: 0;
}

var htmlPic = '', arrayPic = [1, 2, 3, 4, 5, 6, 7, 8, 9], rotate = 360 / arrayPic.length;
arrayPic.forEach(function(i) {
    htmlPic = htmlPic + '<img id="piece'+ i +'" src="img/mm/mm'+ i +'.jpg" class="piece" />';
});
var c = $("#container"), i = 0,r = 64 / Math.tan((rotate / 2 / 180) * Math.PI);
c.html(htmlPic).click(function(){
    //this.style["WebkitTransform"] = "rotateY("+ (-1 * rotate * ++i) +"deg)";
    $(this).css('WebkitTransform',"rotateY("+ (-1 * rotate * ++i) +"deg)");
});
arrayPic.forEach(function(i, j) {
    $("#piece" + i).css('WebkitTransform',"rotateY("+ j * rotate +"deg) translateZ("+ (r+40) +"px)");
});