CSS3 3D旋转立方体
主要用到动画css3 animation,特别注意当完成正方体的过程当中，每一个面旋转时这个面的坐标系是跟着变换的，只是他们的相对位置不变，默认的变换基点是（50% 50% 0），咱们能够使用transform-origin改变默认基点，也能够按默认的基点来变换，关于rotateX或者rotateY旋转角度的正负区分，是视线在x轴或者Y轴的+方向向负方向看，若是是顺时针则角度为正值，逆时针为负值，下面是按默认基点实现立方体的。css
<div class="my3dspace"> <div id="cubepages"> <div class="page" id="font">1</div> <div class="page" id="back">2</div> <div class="page" id="upper">3</div> <div class="page" id="bottom">4</div> <div class="page" id="left">5</div> <div class="page" id="right">6</div> </div> </div>
.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);
}
}
另外一个能够拖动的例子html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>立方体特效</title>
<style>
* {
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)
}
</style>
<script>
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
}
}
</script>
</head>
<body>
<div class="stage">
<div class="cube" id="box">
<div class="front face">front</div>
<div class="back face">back</div>
<div class="up face">up</div>
<div class="down face">down</div>
<div class="left face">left</div>
<div class="right face">right</div>
</div>
</div>
</body>
</html>
里面用到的css3
background-sizecover保持图像的纵横比并将图像拉长或缩放成将彻底覆盖背景定位区域的最小大小。web
background-size：contain 意思会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。动画
相同点：图片都是等比例缩放url
不一样点：cover是铺满整个显示区域。若是显示比例和显示区域的比例相差很大某些部分会不显示spa
contain：正好相反，他是按照某一边来覆盖显示区域的，会有白边3d