正方体3d旋转变化：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
li{list-style:none;}
html,body{height:100%;}
.box{
width: 300px;
height:300px;
position:absolute;
top:0;left:0;right:0;bottom:0;
margin:auto;
transform-style: preserve-3d;
/*animation: play 10s linear infinite;*/
transition: 10s linear;
transform-origin: 50% 50% -150px;
}
.box li{
width:300px;
height:300px;
border: 2PX solid #000;
position: absolute;
top:0;left:0;
font-weight: bold;
font-size: 36px;
opacity: 0.8;
transition: 5s;
}
.box li:nth-child(1){
/*background: orange;*/
}
.box li:nth-child(2){
transform: translateZ(-300px) rotateY(180deg);
/*background: red;*/
}
.box li:nth-child(3){
transform: translateX(-150px) translateZ(-150px) rotateY(-90deg);
/*background: green;*/
}
.box li:nth-child(4){
transform: translateX(150px) translateZ(-150px) rotateY(90deg);
/*background: blue;*/
}
.box li:nth-child(5){
transform: translateY(-150px) translateZ(-150px) rotateX(90deg);
/*background: orchid;*/
}
.box li:nth-child(6){
transform: translateY(150px) translateZ(-150px) rotateX(-90deg);
/*background: salmon;*/
}
/*@keyframes play{
0%{ transform:translateZ(-150px) rotateX(0) rotateY(0);}
100%{ transform: translateZ(-150px) rotateX(360deg) rotateY(360deg);}
}*/
.box:hover{
transform: translateZ(-150px) rotateX(360deg) rotateY(360deg);
}
.box:hover li:nth-child(1){
transform: translateZ(150px);
}
.box:hover li:nth-child(2){
transform: translateZ(-450px) rotateY(180deg);
}
.box:hover li:nth-child(3){
transform: translateX(-300px) translateZ(-150px) rotateY(-90deg);
}
.box:hover li:nth-child(4){
transform: translateX(300px) translateZ(-150px) rotateY(90deg);
}
.box:hover li:nth-child(5){
transform: translateY(-300px) translateZ(-150px) rotateX(90deg);
}
.box:hover li:nth-child(6){
transform: translateY(300px) translateZ(-150px) rotateX(-90deg);
}
.minBox{
width:50px;
height:50px;
position: absolute;
top:50%;
left:50%;
margin:-25px 0 0 -25px;
transform-style: preserve-3d;
transform: translateZ(-150px);
transition:3s 1s;
}
.minBox p{
width:50px;
height:50px;
position: absolute;
top:50%;
left:50%;
margin:-25px 0 0 -25px;
background:#0f0;
opacity: 0.7;
border:1px solid #000;
}
.minBox p:nth-child(1){
transform: translateZ(25px);
}
.minBox p:nth-child(2){
transform: translateZ(-25px) rotateY(180deg);
}
.minBox p:nth-child(3){
transform: translateX(-25px) rotateY(-90deg);
}
.minBox p:nth-child(4){
transform: translateX(25px) rotateY(90deg);
}
.minBox p:nth-child(5){
transform: translateY(-25px) rotateX(90deg);
}
.minBox p:nth-child(6){
transform: translateY(25px) rotateX(-90deg);
}
.box:hover .minBox{
transform: translateZ(-150px) rotateX( 360deg) rotateY( 360deg);
}
</style>
</head>
<body>
<ul class="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<div class="minBox">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
</div>
</ul>
</body>
</html>
3D产品信息展示:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D产品信息展示</title>
<style type="text/css">
*{margin:0;padding:0;}
li{list-style:none;}
html,body{height:100%;}
body{
background-image: radial-gradient( farthest-side ellipse at center, rgba(246,241,232,1) 39%,rgba(212,204,186,1) 100%);
}
.wrap{
width: 1026px;
margin: 100px auto;
}
.wrap h3{
font-size:22px;
text-align: center;
}
.box{
width: 310px;
height:100px;
position: relative;
transform-style: preserve-3d;
transition: 1s linear;
margin: 32px 16px;
float: left;
}
.box img{
display: block;
position: absolute;
top:0;
left: 0;
transform: translateZ(50px);
}
.box p{
width: 310px;
height:100px;
background: orange;
position: absolute;
top:0;
left: 0;
transform: translateY(50px) rotateX(-90deg);
}
.box:hover{
transform: translateZ(-50px) rotateX(90deg);
}
</style>
</head>
<body>
<div class="wrap">
<h3>CSS3 3D变形制作产品信息展示</h3>
<div class="box">
<img src="img/contact.png" alt="" />
<p><strong>Contact Form </strong>The easiest way to add a contact form to your shop.</p>
</div>
<div class="box">
<img src="img/contact.png" alt="" />
<p><strong>Contact Form </strong>The easiest way to add a contact form to your shop.</p>
</div>
<div class="box">
<img src="img/contact.png" alt="" />
<p><strong>Contact Form </strong>The easiest way to add a contact form to your shop.</p>
</div>
<div class="box">
<img src="img/contact.png" alt="" />
<p><strong>Contact Form </strong>The easiest way to add a contact form to your shop.</p>
</div>
<div class="box">
<img src="img/contact.png" alt="" />
<p><strong>Contact Form </strong>The easiest way to add a contact form to your shop.</p>
</div>
<div class="box">
<img src="img/contact.png" alt="" />
<p><strong>Contact Form </strong>The easiest way to add a contact form to your shop.</p>
</div>
</div>
</body>
</html>
