国庆这几天在家好好研究了一下c3的操作，简单说是这样的，在css的基础上就是增加了一下属性值；比如我国庆做的一个盒子3d旋转的效果就是六个div盒子，设置各自的属性值，然后设置鼠标划去的hover效果,然后设置六个div的旋转度和动画进度的旋转值,代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.stage {
height: 100px;
width: 100px;
margin: 600px auto;
position: relative;//设置相对定位
perspective: 300px;
}
.container {
transform-style: preserve-3d;//设置动画的3d属性
}
.container:hover {
animation: spin 2s linear infinite;//鼠标划上去的执行的时间
}
.side {
background: rgba(255,0,0,0.3);
border: 1px solid red;
font-size: 60px;
font-weight: bold;
color: #fff;
text-align: center;
height: 196px;
line-height: 196px;
width: 196px;
position: absolute;
text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
text-transform: uppercase;
}
//设置六个属性的拼接在一起的距离值和旋转度的值
.front {
background: url(img/2.jpg);
transform: translateZ(100px);//代表属性的距离
}
.back {
background: url(img/1.jpg);
transform: rotateX(180deg)/*这代表属性的x轴的旋转度*/ translateZ(100px);
}
.left {
background: url(img/3.jpg);
transform: rotateY(-90deg)/*这代表属性的y轴的旋转度*/ translateZ(100px);
}
.right {
background: url(img/4.jpg);
transform: rotateY(90deg) translateZ(100px);
}
.top {
background: url(img/5.jpg);
transform: rotateX(90deg) translateZ(100px);
}
.bottom {
transform: rotateX(-90deg) translateZ(100px);
}
//最后设置动画的进度的旋转
@keyframes spin{
0%{transform: rotateY(0deg)rotateX(0deg);}
50%{transform: rotateY(180deg)rotateX(180deg);}
100%{transform: rotateY(360deg)rotateX(360deg);}
}
</style>
</head>
<body>
<div class="stage">
<div class="container">
<div class="side front">前面</div>
<div class="side back">背面</div>
<div class="side left">左面</div>
<div class="side right">右面</div>
<div class="side top">顶面</div>
<div class="side bottom">底面</div>
</div>
</div>
</body>
</html>
这是我国庆期间做的一个c3的盒子3d旋转效果
网友评论