验证中...
Languages: CSS
Categories: Web开发技术
Latest update 2019-12-03 11:17
核心css
Raw Copy
.wrap .cube{
/* 父级相对定位 */
position: relative;
width: 12.5rem;
height: 12.5rem;
margin: 0 auto;
/* 加3d,因为最后旋转的是爸爸 */
transform-style: preserve-3d;
animation: box 10s linear infinite;
/* 在chrome开发者工具调试旋转父级查看效果 */
transform: rotateX(0deg) rotateY(0deg);
cursor: pointer;
}
index.php
Raw Copy
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3D</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: #000000;
}
.wrap{
/* 加景深 */
perspective:1000px ;
position: absolute;
height: 200px;
perspective: 1000px;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.wrap .cube{
/* 2、父级相对定位 */
position: relative;
width: 12.5rem;
height: 12.5rem;
margin: 0 auto;
/* 4、爸爸加3d,因为最后旋转的是爸爸 */
transform-style: preserve-3d;
animation: box 10s linear infinite;
/* 5、在chrome开发者工具调试旋转父级查看效果 */
transform: rotateX(0deg) rotateY(0deg);
cursor: pointer;
}
@keyframes box{
0%{transform: rotateX(0) rotateY(0) rotateZ(0deg);}
100%{transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);}
}
/* big box */
.wrap .cube div{
/*/2、自己为绝对定位相对于父级,把6个面盒子全部放进来 */
position: absolute;
top: 0;
left: 0;
/*/1、相对于父级100% */
width: 100%;
height: 100%;
border: 0px solid black;
font-size: 1.25rem;
color: white;
text-align: center;
line-height: 200px;
transition: transform .3s ease-in;
}
/* 5、调试出的参数 */
.wrap .cube .front{
background-image: url(http://www.zhoudong.top/ship/img1/aaa.jpg);
background-size: auto 100%;
transform: translateZ(100px);
}
.wrap .cube .back{
background-image: url(http://www.zhoudong.top/ship/img1/b1.jpeg);
background-size: auto 100%;
transform: translateZ(-100px) rotateY(180deg);
}
.wrap .cube .right{
background-image: url(http://www.zhoudong.top/ship/img1/b3.jpg);
background-size: auto 100%;
transform: rotateY(90deg) translateZ(100px);
/*先旋转在移动*/
}
.wrap .cube .left{
background-image: url(http://www.zhoudong.top/ship/img1/b4.jpg);
background-size: auto 100%;
transform: rotateY(-90deg) translateZ(100px);
}
.wrap .cube .top{
background-image: url(http://www.zhoudong.top/ship/img1/b7.jpg);
background-size: auto 100%;
transform: rotateX(90deg) translateZ(100px);
}
.wrap .cube .bottom{
background-image: url(http://www.zhoudong.top/ship/img1/b6.jpg);
background-size: auto 100%;
transform: rotateX(-90deg) translateZ(100px);
}
/* 6、inner box*/
.wrap .cube i{
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
border: 1px solid black;
}
.wrap .cube .ifront{
background-image: url(http://www.zhoudong.top/ship/img1/aaa.jpg);
background-size: auto 100%;
transform: translateZ(50px);
}
.wrap .cube .iback{
background-image: url(http://www.zhoudong.top/ship/img1/b1.jpeg);
background-size: auto 100%;
transform: translateZ(-50px) rotateY(180deg);
}
.wrap .cube .iright{
background-image: url(http://www.zhoudong.top/ship/img1/b3.jpg);
background-size: auto 100%;
transform: rotateY(90deg) translateZ(50px);
}
.wrap .cube .ileft{
background-image: url(http://www.zhoudong.top/ship/img1/b4.jpg);
background-size: auto 100%;
transform: rotateY(-90deg) translateZ(50px);
}
.wrap .cube .itop{
background-image: url(http://www.zhoudong.top/ship/img1/b7.jpg);
background-size: auto 100%;
transform: rotateX(90deg) translateZ(50px);
}
.wrap .cube .ibottom{
background-image: url(http://www.zhoudong.top/ship/img1/b6.jpg);
background-size: auto 100%;
transform: rotateX(-90deg) translateZ(50px);
}
/* 7、hover box */
.wrap .cube:hover .front{
background-image: url(http://www.zhoudong.top/ship/img1/aaa.jpg);
background-size: auto 100%;
transform: translateZ(200px);
}
.wrap .cube:hover .back{
background-image: url(http://www.zhoudong.top/ship/img1/b1.jpeg);
background-size: auto 100%;
transform: translateZ(-200px) rotateY(180deg);
}
.wrap .cube:hover .right{
background-image: url(http://www.zhoudong.top/ship/img1/b3.jpg);
background-size: auto 100%;
transform: rotateY(90deg) translateZ(200px);
}
.wrap .cube:hover .left{
background-image: url(http://www.zhoudong.top/ship/img1/b4.jpg);
background-size: auto 100%;
transform: rotateY(-90deg) translateZ(200px);
}
.wrap .cube:hover .top{
background-image: url(http://www.zhoudong.top/ship/img1/b7.jpg);
background-size: auto 100%;
transform: rotateX(90deg) translateZ(200px);
}
.wrap .cube:hover .bottom{
background-image: url(http://www.zhoudong.top/ship/img1/b6.jpg);
background-size: auto 100%;
transform: rotateX(-90deg) translateZ(200px);
}
</style>
</head>
<body>
<div class="wrap">
<div class="cube">
<div class="front"></div>
<div class="back"></div>
<div class="right"></div>
<div class="left"></div>
<div class="top"></div>
<div class="bottom"></div>
<i class="ifront"></i>
<i class="iback"></i>
<i class="iright"></i>
<i class="ileft"></i>
<i class="itop"></i>
<i class="ibottom"></i>
</div>
</body>
</html>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$.ajax({
type:'POST',
url:'jianyi.php',
dataType:'json',
data:{act:"tuce1",name:"<?php echo $_GET['name'] ?>"},
success:function(data){
var json = eval(data); //转json
$(".ifront").css("background-image","url("+json[0]['tu_src']+")");
$(".iback").css("background-image","url("+json[1]['tu_src']+")");
$(".iright").css("background-image","url("+json[2]['tu_src']+")");
$(".ileft").css("background-image","url("+json[3]['tu_src']+")");
$(".itop").css("background-image","url("+json[4]['tu_src']+")");
$(".ibottom").css("background-image","url("+json[5]['tu_src']+")");
$(".front").css("background-image","url("+json[0]['tu_src']+")");
$(".back").css("background-image","url("+json[1]['tu_src']+")");
$(".right").css("background-image","url("+json[2]['tu_src']+")");
$(".left").css("background-image","url("+json[3]['tu_src']+")");
$(".top").css("background-image","url("+json[4]['tu_src']+")");
$(".bottom").css("background-image","url("+json[5]['tu_src']+")");
},
error:function(jqXHR){
alert("提交失败!!!")
}
});
</script>

Comment list( 0 )

Sign in for post a comment

Help Search