<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
/*.box{
width: 1000px;
height: 1000px;
margin: 0 auto;
}*/
.box1{
width: 200px;
height: 200px;
/*position: relative;
margin: 50px auto;*/
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
transform-style: preserve-3d;
/*transition: 5s;*/
transform-origin: 50% 50% -100px;
animation: lifangti 5s linear infinite;
}
.box1 li{
width: 200px;
height: 200px;
position: absolute;
opacity: 0.5;
font-size: 30px;
line-height: 200px;
text-align: center;
}
.box1 li:nth-child(1){
opacity: 0.5;
background: yellow;
}
.box1 li:nth-child(2){
background: yellowgreen;
transform: translateZ(-200px) rotateY(180deg);
}
.box1 li:nth-child(3){
background: burlywood;
transform: translateX(-200px) rotateY(-90deg);
transform-origin: right;
}
.box1 li:nth-child(4){
background: cyan;
transform: translateX(200px) rotateY(90deg);
transform-origin: left;
}
.box1 li:nth-child(5){
background: darkcyan;
transform: translateY(-200px) rotateX(90deg);
transform-origin: bottom;
}
.box1 li:nth-child(6){
background: greenyellow;
transform: translateY(200px) rotateX(-90deg);
transform-origin: top;
}
/*.box1:hover{
transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg);
}*/
@keyframes lifangti{
0%{transform: rotateX(0) rotateY(0) rotateZ(0);}
100%{transform: rotateX(-360deg) rotateY(-360deg) rotateZ(-360deg);}
}
.box2{
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
transform-style: preserve-3d;
/*transition: 5s;*/
transform-origin: 50% 50% -25px;
animation: xiaode 5s linear infinite;
transform: translateZ(-100PX);
}
.box2 p{
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
font-size: 10px;
line-height: 50px;
text-align: center;
opacity: 0.7;
}
.box2 p:nth-child(1){
background: burlywood;
transform: translateZ(25px);
}
.box2 p:nth-child(2){
background: yellow;
transform: translateZ(-25px) rotateY(180deg);
}
.box2 p:nth-child(3){
background: yellowgreen;
transform: translateX(-25px) rotateY(-90deg);
}
.box1 p:nth-child(4){
background: darkcyan;
transform: translateX(25px) rotateY(90deg);
}
.box2 p:nth-child(5){
background: cyan;
transform: translateY(-25px) rotateX(90deg);
}
.box2 p:nth-child(6){
background: lightcyan;
transform: translateY(25px) rotateX(-90deg);
}
/*.box1:hover .box2{
transform: translateZ(-100px) rotateY(360deg) rotateX(360deg) rotateZ(360deg);
}*/
@keyframes xiaode{
0%{transform: translateZ(-100PX) rotateX(0) rotateY(0) rotateZ(0);}
100%{transform: translateZ(-100PX) rotateX(360deg) rotateY(360deg) rotateZ(360deg);}
}
</style>
</head>
<body>
<ul class="box1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<div class="box2">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
</div>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
html,body{height: 100%;}
.box{
height: 100%;
width: 100%;
}
.box ul{
width: 200px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -100px;
transform-style: preserve-3d;
animation: qwe 20s infinite linear;
}
@keyframes qwe{
0{transform: rotateY(0deg) rotateX(0deg);}
50%{transform: rotateY(180deg) rotateX(5deg);}
100%{transform: rotateY(360deg) rotateX(0deg);}
}
.box ul li{
width: 200px;
height: 300px;
position: absolute;
top: 0;
left: 0;
}
.box img{
width: 200px;
height: 300px;
}
.box li:nth-child(1){
transform: rotateY(36deg) translateZ(500px);
}
.box li:nth-child(2){
transform: rotateY(72deg) translateZ(500px);
}
.box li:nth-child(3){
transform: rotateY(108deg) translateZ(500px);
}
.box li:nth-child(4){
transform: rotateY(144deg) translateZ(500px);
}
.box li:nth-child(5){
transform: rotateY(180deg) translateZ(500px);
}
.box li:nth-child(6){
transform: rotateY(216deg) translateZ(500px);
}
.box li:nth-child(7){
transform: rotateY(252deg) translateZ(500px);
}
.box li:nth-child(8){
transform: rotateY(288deg) translateZ(500px);
}
.box li:nth-child(9){
transform: rotateY(324deg) translateZ(500px);
}
.box li:nth-child(10){
transform: rotateY(360deg) translateZ(500px);
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="img/图1.jpg"/></li>
<li><img src="img/图2.jpg"/></li>
<li><img src="img/图3.jpg"/></li>
<li><img src="img/图4.jpg"/></li>
<li><img src="img/图8.jpg"/></li>
<li><img src="img/图5.jpg"/></li>
<li><img src="img/图6.jpg"/></li>
<li><img src="img/图7.jpg"/></li>
<li><img src="img/图8.jpg"/></li>
<li><img src="img/图3.jpg"/></li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.box{
width: 1050px;
height: 700px;
margin: 0 auto;
position: relative;
}
.box h1{
height: 100px;
line-height: 100px;
text-align: center;
}
.box ul{
width: 310px;
height: 100px;
transform-style: preserve-3d;
transition: 1s;
}
.box1{
position: absolute;
top: 100px;
left: 0;
}
.box2{
position: absolute;
top: 100px;
left: 340px;
}
.box3{
position: absolute;
top: 100px;
left: 680px;
}
.box4{
position: absolute;
top: 250px;
left: 0px;
}
.box5{
position: absolute;
top: 250px;
left: 340px;
}
.box6{
position: absolute;
top: 250px;
left: 680px;
}
.box ul li{
width: 310px;
height: 100px;
position: absolute;
}
.box1_li1{
transform: translateZ(50px);
}
.box .box1_li2{
background: #cfd8e3;
transform: translateY(50px) rotateX(-90deg);
/*transform-origin: top;*/
}
.box ul:hover{
transform: rotateX(90deg);
/*transform-origin: bottom;*/
}
</style>
</head>
<body>
<!-- 好了
-->
<div class="box">
<h1>CSS3 3D变形制作产品信息展示</h1>
<ul class="box1">
<li class="box1_li1"><img src="img/chimpified.jpeg"/></li>
<li class="box1_li2">Contact Form The easiest way to add a contact formto your shop. </li>
</ul>
<ul class="box2">
<li class="box1_li1"><img src="img/contact.png"/></li>
<li class="box1_li2">Contact Form The easiest way to add a contact formto your shop. </li>
</ul>
<ul class="box3">
<li class="box1_li1"><img src="img/jilt.png"/></li>
<li class="box1_li2">Contact Form The easiest way to add a contact formto your shop. </li>
</ul>
<ul class="box4">
<li class="box1_li1"><img src="img/olark.png"/></li>
<li class="box1_li2">Contact Form The easiest way to add a contact formto your shop. </li>
</ul>
<ul class="box5">
<li class="box1_li1"><img src="img/ordoro.png"/></li>
<li class="box1_li2">Contact Form The easiest way to add a contact formto your shop. </li>
</ul>
<ul class="box6">
<li class="box1_li1"><img src="img/yotpo.jpeg"/></li>
<li class="box1_li2">Contact Form The easiest way to add a contact formto your shop. </li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/全局样式.css"/>
<style>
body{
background: #cccccc;
}
.box{
width: 900px;
/*height: 536px;*/
background: yellowgreen;
margin: 0 auto;
border: 4px solid #fff;
}
.box1{
width: 900px;
height: 82px;
line-height: 82px;
color: #fff;
font-size: 54px;
background: #f47d31;
text-align: center;
font-weight: bold;
}
.zhuti{
width: 894px;
/*height: 408px;*/
background: #888888;
padding-left: 6px;
}
.zhunav{
float: left;
width: 216px;
}
.zhunav p{
width: 216px;
height: 46px;
line-height: 50px;
font-size: 14px;
font-weight: bold;
text-align: center;
color: #fff;
}
.zhunav a{
display: block;
width: 216px;
height: 43px;
border-bottom: 3px solid #fff;
color: #e37d31;
line-height: 43px;
font-size: 14px;
text-indent: 11px;
}
.zhunav a:hover{
background: yellow;
}
.maincenter{
width: 430px;
float: left;
margin-left: 15px;
padding-top: 10px;
}
.maincenter1{
width: 410px;
padding: 10px;
margin-bottom: 10px;
background: #fff;
}
.maincenter1 header{
width: 410px;
height: 31px;
background: #f47d31;
line-height: 31px;
color: #fff;
font-size: 16px;
font-weight: bold;
text-align: center;
margin-bottom: 15px;
}
.maincenter1 p{
line-height: 18px;
font-size: 14px;
margin-bottom: 13px;
}
.maincenter1 footer{
width: 410px;
height: 26px;
background: #f47d31;
line-height: 26px;
font-size: 12px;
font-weight: bold;
color: #fff;
text-align: center;
}
.main_right{
width: 190px;
float: right;
margin-right: 21px;
font-weight: bold;
}
.main_right header{
height: 50px;
width: 190px;
line-height: 50px;
font-size: 16px;
text-align: center;
color: #fff;
}
.main_right p{
line-height: 18px;
font-size: 16px;
color: #fff;
font-style：oblique;
}
.dibu{
width: 900px;
height: 46px;
font-size: 16px;
line-height: 46px;
text-align: center;
color: #fff;
background: #f47d31;
}
</style>
</head>
<body>
<section class="box clear_fix">
<header class="box1">Header</header>
<main class="zhuti clear_fix">
<nav class="zhunav">
<p>Nav</p>
<a href="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link3</a>
</nav>
<section class="maincenter">
<article class="maincenter1">
<header>Article Header</header>
<p>
Lorem ipsum dolor HTML 5 nunc aut nunquam sit amet,consectetur adipiscing elit. Vivamus at est eros, velfringilla urna.
</p>
<p>
Per inceptos himenaeos. Quisque feugiat, justo atvehicula pellentesque, turpis lorem dictum nunc.
</p>
<footer>Article Footer</footer>
</article>
<article class="maincenter1">
<header>Article Header</header>
<p>
HTML 5:"Lorem ipsum dolor nunc aut nunquam sit amet,consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna. Pellentesque odio
</p>
<footer>Article Footer</footer>
</article>
</section>
<section class="main_right">
<header>Aside</header>
<p>
HTML5: "Lorem ipsumdolor nunc aut nunquamsit amet, consectetur adipiscing elit. Vivamusat est eros, vel fringillaurna. Pellentesque odiorhoncus
</p>
</section>
</main>
<footer class="dibu">Footer</footer>
</section>
</body>
</html>
