css3d模型做法,CSS3

创建3D模型

*{

padding:0;

margin:0;

}

li{

list-style:none;

}

body{

font-size:12px;

background:#fff;

font-family:'Helvetica Neue',Arial,sans-serif;

-webkit-text-size-adjust: none;

color:#333;

}

.box{

margin:100px auto;

width:500px;

height:500px;

border:5px solid #ddd;

}

#cube{

width:300px;

height:300px;

margin:100px auto;

-moz-transform-style:preserve-3d;

-webkit-transform-style:preserve-3d;

}

#cube li{

display:block;

position:absolute;

width:298px;

height:298px;

font-size:120px;

line-height:298px;

text-align:center;

border:1px solid #333;

z-index:10;

}

.front{

-webkit-transform:rotateY(0deg) translateZ(150px);

-moz-transform:rotateY(0deg) translateZ(150px);

background:rgba(0,255,0,0.3);

}

.back{

-webkit-transform:rotateY(180deg) translateZ(150px);

-moz-transform:rotateY(180deg) translateZ(150px);

background:rgba(255,0,0,0.3);

}

.right{

-webkit-transform:rotateY(90deg) translateZ(150px);

-moz-transform:rotateY(90deg) translateZ(150px);

background:rgba(255,255,0,0.3);

}

.left{

-webkit-transform:rotateY(-90deg) translateZ(150px);

-moz-transform:rotateY(-90deg) translateZ(150px);

background:rgba(10,10,10,0.3);

}

.top{

-webkit-transform:rotateX(90deg) translateZ(150px);

-moz-transform:rotateX(90deg) translateZ(100px);

background:rgba(100,0,0,0.3);

}

.bottom{

-webkit-transform:rotateX(-90deg) translateZ(150px);

-moz-transform:rotateX(-90deg) translateZ(150px);

background:rgba(0,255,255,0.3);

}

input[type="range"]{

width:800px;

}

• 透　　视：

  800px

• 外容器宽：

  300px

• 外容器高：

  300px

• 水平视点：

  50%

• 垂直视点：

  50%

• translateZ：

  10px

• rotateX：

  0deg

• rotateY：

  0deg

• transform-style：

• 1
• 2
• 3
• 4
• 5
• 6

$(function(){

var transformArr=[0,0]

$("#perspective").change(function(e) {

$("#cube").parent().css({

"-webkit-perspective":$(this).val()+"px"

}

);

$(this).next("span").text($(this).val()+"px");

}

);

$("#width").change(function(e) {

// var val=$(this).val();

$("#cube").css({

"border":"1px solid red",

"width":$(this).val()+"px"

}

);

$(this).next("span").text($(this).val()+"px");

}

);

$("#height").change(function(e) {

// var val=$(this).val();

$("#cube").css({

"border":"1px solid red",

"height":$(this).val()+"px"

}

);

$(this).next("span").text($(this).val()+"px");

}

);

$("#perspective-origin-x").change(function(e) {

// var val=$(this).val();

$("#cube").css({

"-webkit-perspective-origin-x":$(this).val()+"%",

"-moz-perspective-origin-x":$(this).val()+"%"

}

);

$(this).next("span").text($(this).val()+"%");

}

);

$("#perspective-origin-y").change(function(e) {

// var val=$(this).val();

$("#cube").css({

"-webkit-perspective-origin-y":$(this).val()+"%",

"-moz-perspective-origin-y":$(this).val()+"%"

}

);

$(this).next("span").text($(this).val()+"%");

}

);

$("#translateZ").change(function(e) {

// var val=$(this).val();

$("#cube").css({

"-webkit-transform":"translateZ("+$(this).val()+"px)"

}

);

$(this).next("span").text($(this).val()+"px");

}

);

$("#cube_rotateX").change(function(){

transformArr[0]=$(this).val();

$("#cube").css({

"-webkit-transform":"rotateX("+transformArr[0]+"deg) rotateY("+transformArr[1]+"deg)"

}

);

$(this).next("span").text($(this).val()+"deg");

}

);

$("#cube_rotateY").change(function(){

transformArr[1]=$(this).val();

$("#cube").css({

"-webkit-transform":"rotateX("+transformArr[0]+"deg) rotateY("+transformArr[1]+"deg)"

}

);

$(this).next("span").text($(this).val()+"deg");

}

);

$("#transform-style").toggle(function(){

$(this).val("flat");

$("#cube").css({

"-webkit-transform-style":"flat",

"-moz-transform-style":"flat"

}

);

}

,function(){

$("#cube").css({

"-webkit-transform-style":"preserve-3d",

"-moz-transform-style":"preserve-3d"

}

);

$(this).val("preserve-3d");

}

);

}

);