java3D实现空间立方体_CSS3 3D旋转立方体

主要用到动画css3  animation,特别注意当完成正方体的过程中，每个面旋转时这个面的坐标系是跟着变换的，只是他们的相对位置不变，默认的变换基点是(50% 50% 0)，我们可以使用transform-origin改变默认基点，也可以按默认的基点来变换，关于rotateX或者rotateY旋转角度的正负区分，是视线在x轴或者Y轴的+方向向负方向看，如果是顺时针则角度为正值，逆时针为负值，下面是按默认基点实现立方体的。

1

2

3

4

5

6

.my3dspace{margin-top:100px;-webkit-perspective:800;}

#cubepages{width:200px;height:200px;margin:0 auto;-webkit-transform-style:preserve-3d;position:relative;-webkit-animation:rotate 20s infinite;}

.page{position:absolute;width:160px;height:160px;padding:20px;box-sizing:content-box;font-size:100px;text-align:center;line-height:170px;background:#333;color:#fff;-webkit-transition: -webkit-transform 1s linear;}

#font {

transform: rotateY(0) translateZ(100px);background:#09c45d;

}

#back {

transform: translateZ(-100px) rotateY(180deg) ;background:#01bb43;

}

#left {

transform: rotateY(-90deg) translateZ(100px);background:#dd74f7;

}

#right {

transform: rotateY(90deg) translateZ(100px);background:#eb12c0;

}

#upper {

transform: rotateX(90deg) translateZ(100px);background:#03cae2;

}

#bottom {

transform: rotateX(-90deg) translateZ(100px);background:#11aafa;

}

@-webkit-keyframes rotate {

from {

transfrom:rotateX(0deg) rotateY(0deg) rotateZ(0deg);

}

to{

transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);

}

}

另一个可以拖动的例子

立方体特效

* {

margin: 0;

padding: 0;

}

body {

background: #ccc;

}

.stage {

perspective: 800;

perspective-origin: 50% 50%;

}

.cube {

position: relative;

width: 200px;

height: 200px;

margin: 100px auto;

background: #ccc;

transform-style: preserve-3d;

transform: rotateX(-20deg) rotateY(50deg);

}

.cube .face {

width: 100%;

height: 100%;

position: absolute;

top: 0;

left: 0;

background-size: cover;

box-shadow: 0 0 100px #5fbcff;

}

.front {

background: url(images/a5.png);

transform: translateZ(100PX);

}

.back {

background: url(images/a1.png);

transform: translateZ(-100px);

}

/*.left{background:url(images/a2.png);transform:translateX(-100PX) rotateY(-90deg)} 也可以写成下面的写法，旋转角度后坐标系统也发生了变化*/

.left {

background: url(images/a2.png);

transform: rotateY(-90deg) translateZ(100PX)

}

/*.left{background:url(images/a2.png);transform:translateX(-100PX) rotateY(-90deg)} 围绕y轴旋转，图形右侧向里为正，图形右侧向外为负*/

.right {

background: url(images/a2.png);

transform: translateX(100PX) rotateY(90deg)

}

.up {

background: url(images/a3.png);

transform: translateY(-100PX) rotateX(90deg)

}

.down {

background: url(images/a3.png);

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

}

window.onload = function() {

var box = document.querySelector("#box")

var y = 50

var x = 20

box.onmousedown = function(ev) {

var oEvent = ev || event;

var disX = oEvent.clientX - y

var disY = oEvent.clientY - x

document.onmousemove = function(ev) {

var oEvent = ev || event;

x = oEvent.clientY - disY

y = oEvent.clientX - disX

box.style.transform = "rotateX(" + x + "deg) rotateY(" + y + "deg)"

};

document.onmouseup = function() {

document.onmousemove = null

document.onmouseup = null

};

return false

}

}

front

back

up

down

left

right

里面用到的

background-sizecover保持图像的纵横比并将图像拉长或缩放成将完全覆盖背景定位区域的最小大小。

background-size：contain 意思会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

相同点：图片都是等比例缩放

不同点：cover是铺满整个显示区域。如果显示比例和显示区域的比例相差很大某些部分会不显示

contain：正好相反，他是按照某一边来覆盖显示区域的，会有白边