示例1（兩面翻轉的圖片）：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>兩面翻轉的圖片</title>
<style>
div {
width: 224px;
height: 224px;
margin: 100px auto;
position: relative;
}
div img {
position: absolute;
top: 0;
left: 0;
transition: all 1s;
}
div img:first-child {
z-index: 1;
backface-visibility: hidden; /*不是正面對向屏幕，就隱藏*/
}
div:hover img {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div>
<img src="img/qian.svg" alt=""/>
<img src="img/hou.svg" alt=""/>
</div>
</body>
</html>
示例2（導航菜單3D）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D導航</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
/*取消ul的默認樣式*/
list-style: none;
margin: 90px auto;
width: 800px;
}
ul li {
width: 120px;
height: 50px;
float: left;
position: relative;
/*設置子元素顯示方式爲3d*/
transform-style:preserve-3d;
/*設置旋轉的過渡效果*/
transition: transform 1s;
}
li a {
position: absolute;
/*設置了相對定位的元素，默認具有塊元素的特點*/
/*取消a鏈接的默認下劃線*/
text-decoration: none;
text-align: center;
line-height: 50px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
top: 0;
left: 0;
width: 100%;
height: 100%;
}
li a:first-child {
transform: translateZ(25px);
background-color: #ff5544;
}
li a:last-child {
background-color: skyblue;
transform: rotateX(-90deg) translateZ( 25px );
}
li:hover {
transform: rotateX(90deg);
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">厚溥程序員</a>
<a href="#">前端學院</a>
</li>
<li>
<a href="#">厚溥程序員</a>
<a href="#">設計學院</a>
</li><li>
<a href="#">厚溥程序員</a>
<a href="#">實施學院</a>
</li><li>
<a href="#">厚溥程序員</a>
<a href="#">人工智能學院</a>
</li><li>
<a href="#">厚溥程序員</a>
<a href="#">物聯網學院</a>
</li>
</ul>
</body>
</html>
示例3（開門大吉）：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>開門大吉</title>
<style>
section {
width: 450px;
height: 300px;
border: 1px solid #000;
margin: 100px auto;
background: url(img/3.jpg) no-repeat;
position: relative;
perspective: 1000px; /*給父盒子添加透視效果*/
}
.door-l, .door-r {
position: absolute;
top: 0;
width: 50%;
height: 100%;
background-color: pink;
transition: all 1s; /*兩個門都做過渡效果*/
background: url(img/bg.png);
}
.door-l {
left: 0;
border-right: 1px solid #000;
transform-origin: left;/* 左側盒子按照左邊翻轉*/
}
.door-r {
right: 0;
left: 1px solid #000;
transform-origin: right;/* 右側盒子按照右邊翻轉*/
}
.door-l::before, .door-r::before { /*僞元素 就是插入一個元素標籤*/
content: '';
position: absolute;
top: 50%;
width: 20px;
height: 20px;
border: 1px solid #000;
border-radius: 50%; /*圓角*/
transform：translateY(-50%); /*translate 如果是百分比， 就是走自己高度的一半*/
}
.door-l::before {
right: 5px;
}
.door-r::before {
left: 5px;
}
/*鼠標經過section 盒子 兩個門盒子 翻轉 rotateY*/
section:hover .door-l {
transform: rotateY(-130deg); /*因爲往左邊翻轉，所以是負值*/
}
section:hover .door-r {
transform: rotateY(130deg);
}
</style>
</head>
<body>
<section>
<div class="door-l"></div>
<div class="door-r"></div>
</section>
</body>
</html>
示例4（子菜單導航欄3D）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>翻轉導航欄</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
ul{
list-style: none;
}
body{
font:16px "微軟雅黑";
background-color: #CCC;
}
a{
color:#fff;
text-decoration: none;
}
nav{
width: 80%;
margin:100px auto;
height: 50px;
background: -webkit-linear-gradient(#292929, #252525);
border-bottom: 2px solid #222222;
border-top: 2px solid #1B1B1B;
min-width: 400px;
position: relative;
}
nav>ul{
display: -webkit-box;
}
nav>ul>li{
-webkit-box-flex:1;
height:50px;
text-align: center;
line-height: 50px;
position: relative;
}
nav li:hover{
background: -webkit-linear-gradient(#1c1c1c, #1b1b1b);
}
.subnav{
position: absolute;
top:50px;
left:0;
width: 100%;
-webkit-perspective:400px;
max-height: 0;
}
.subnav li{
background: -webkit-linear-gradient(#292929, #252525);
opacity: 0;
transform:rotateY(90deg);
transition:opacity .4s,transform .5s;
}
nav>ul>li:hover .subnav li{
opacity: 1;
transform:none;
}
.subnav li:nth-child(1){
-webkit-transition-delay: 250ms;
}
.subnav li:nth-child(2){
-webkit-transition-delay: 200ms;
}
.subnav li:nth-child(3){
-webkit-transition-delay: 150ms;
}
.subnav li:nth-child(4){
-webkit-transition-delay: 100ms;
}
.subnav li:nth-child(5){
-webkit-transition-delay: 50ms;
}
.subnav li:nth-child(6){
-webkit-transition-delay: 0ms;
}
nav>ul>li:hover .subnav li:nth-child(1)
{
-webkit-transition-delay: 0s;
}
nav>ul>li:hover .subnav li:nth-child(2)
{
-webkit-transition-delay: 50ms;
}
nav>ul>li:hover .subnav li:nth-child(3)
{
-webkit-transition-delay: 100ms;
}
nav>ul>li:hover .subnav li:nth-child(4)
{
-webkit-transition-delay: 150ms;
}
nav>ul>li:hover .subnav li:nth-child(5)
{
-webkit-transition-delay: 200ms;
}
nav>ul>li:hover .subnav li:nth-child(6)
{
-webkit-transition-delay: 250ms;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">厚溥IT</a></li>
<li>
<a href="#">厚溥IT</a>
<ul class="subnav">
<li><a href="#">網頁平面</a></li>
<li><a href="#">java培訓</a></li>
<li><a href="#">php培訓</a></li>
<li><a href="#">網絡營銷</a></li>
<li><a href="#">IOS培訓</a></li>
<li><a href="#">c++培訓</a></li>
</ul>
</li>
<li>
<a href="#">厚溥IT</a>
<ul class="subnav">
<li><a href="#">網頁平面</a></li>
<li><a href="#">java培訓</a></li>
<li><a href="#">php培訓</a></li>
<li><a href="#">網絡營銷</a></li>
<li><a href="#">IOS培訓</a></li>
<li><a href="#">c++培訓</a></li>
</ul>
</li>
<li><a href="#">厚溥IT</a></li>
<li><a href="#">厚溥IT</a></li>
<li><a href="#">厚溥IT</a></li>
</ul>
</nav>
</body>
</html>