一个小例子，3D的正方体
<!DOCTYPE html>
<html oncontextmenu=self.event.returnValue=false onselectstart="return false"> <!-- 设置在当前网页禁止使用鼠标右键(不允许用户保存网页) -->
<head>
<meta charset="utf-8"/>
<title>3d效果</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
ul,li{
list-style: none;
}
.fl{
float:left;
}
.ovf{
overflow: hidden;
}
.box{
100%;
/*透视视距*/
perspective: 1800PX;
/*设置物体正面位置，x轴设置左右，y轴设置上下*/
perspective-origin: 50% 50%;
}
.ul-box{
200px;
height:200px;
margin:150px auto;
position: relative;
/*保留当前元素的子元素的3d效果*/
transform-style: preserve-3d;
}
.ul-box1{
100px;
height:100px;
/*保留当前元素的子元素的3d效果*/
transform-style: preserve-3d;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
.ul-box:hover{
200px;
height:200px;
margin:150px auto;
position: relative;
/*保留当前元素的子元素的3d效果*/
ransform-style: preserve-3d;
animation: rotating 30s linear 0s infinite;
}
.list{
margin:0 auto;
200px;
height: 200px;
line-height: 200px;
text-align: center;
color:#fff;
letter-spacing: 2PX;
position: absolute;
top:0;
left:0;
}
.ulst{
200px;
height:200px;
}
.lista{
calc(33.333333%);
line-height:66.66px;
background-color: #e4963c;
}
.list1{
margin:0 auto;
100px;
line-height: 100px;
text-align: center;
color:#fff;
letter-spacing: 2PX;
position: absolute;
top:0;
left:0;
}
.a{
background-color:rgba(255, 0, 0, .5);
transform:rotate(0deg) translateZ(100px);
}
.a1{
background-color:rgba(255, 0, 0, .5);
transform:rotate(0deg) translateZ(50px);
}
.ul-box:hover .a{
background-color:rgba(255, 0, 0, .5);
transform:rotate(0deg) translateZ(170px);
/* 320px;
height:320px;*/
}
/*.ul-box:hover .a .ulst .lista{
margin:20px;
}*/
.b{
background-color:rgba(0, 255, 0, .5);
transform:rotateY(90deg) translateZ(100px);
}
.b1{
background-color:rgba(0, 255, 0, .5);
transform:rotateY(90deg) translateZ(50px);
}
.ul-box:hover .b{
background-color:rgba(0, 255, 0, .5);
transform:rotateY(90deg) translateZ(170px);
}
.c{
background-color:rgba(0, 0, 255, .5);
transform:rotateY(180deg) translateZ(100px);
}
.c1{
background-color:rgba(0, 0, 255, .5);
transform:rotateY(180deg) translateZ(50px);
}
.ul-box:hover .c{
background-color:rgba(0, 0, 255, .5);
transform:rotateY(180deg) translateZ(170px);
}
d{
background-color:rgba(210, 68, 0, .5);
transform:rotateY(270deg) translateZ(100px);
}
.d1{
background-color:rgba(210, 68, 0, .5);
transform:rotateY(270deg) translateZ(50px);
}
.ul-box:hover .d{
background-color:rgba(210, 68, 0, .5);
transform:rotateY(270deg) translateZ(170px);
}
.e{
background-color:rgba(170, 248, 37, .5);
transform:rotateX(90deg) translateZ(100px);
}
.e1{
background-color:rgba(170, 248, 37, .5);
transform:rotateX(90deg) translateZ(50px);
}
.ul-box:hover .e{
background-color:rgba(170, 248, 37, .5);
transform:rotateX(90deg) translateZ(170px);
}
.f{
background-color:rgba(238, 200, 125, .5);
transform:rotateX(-90deg) translateZ(100px);
}
.f1{
background-color:rgba(238, 200, 125, .5);
transform:rotateX(-90deg) translateZ(50px);
}
.ul-box:hover .f{
background-color:rgba(238, 200, 125, .5);
transform:rotateX(-90deg) translateZ(170px);
}
@keyframes rotating {
0% {
transform: rotateY(0deg) rotateX(0deg);
}
25%{
transform: rotateY(360deg) rotateX(0deg);
}
50%{
transform: rotateY(0deg) rotateX(360deg);
}
75%{
transform: rotateY(0deg) rotateX(0deg);
}
100%{
transform: rotateY(360deg) rotateX(360deg);
}
}
</style>
</head>
<body>
<div class="box">
<ul class="ul-box">
<li class="list a">
HTML
<!-- <ul class="ulst ovf">
<li class="lista fl">0</li>
<li class="lista fl">1</li>
<li class="lista fl">2</li>
<li class="lista fl">3</li>
<li class="lista fl">4</li>
<li class="lista fl">5</li>
<li class="lista fl">6</li>
<li class="lista fl">7</li>
<li class="lista fl">8</li>
</ul> -->
</li>
<li class="list b">CSS3</li>
<li class="list c">JAVASCRIPT</li>
<li class="list d">JQUERY</li>
<li class="list e">TYPESCRIPT</li>
<li class="list f">VUE</li>
<ul class="ul-box1">
<li class="list1 a1">a001</li>
<li class="list1 b1">a002</li>
<li class="list1 c1">a003</li>
<li class="list1 d1">a004</li>
<li class="list1 e1">a005</li>
<li class="list1 f1">a006</li>
</ul>
</ul>
</div>
</body>
</html>