<!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變形制作產(chǎn)品信息展示</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>
