需要用到的属性:
prespective :(在父元素中使用)
景深(近大远小) 是我们观察物体的一个视角距离,距离越小效果越明显人们一般观察的距离为800px–1200px效果最为明显
transfrom-style属性
(在父元素中使用)
transfrom-style:preserve-3d;(让当前元素形成一个3D空间)
perspective-origin属性
perspective-origin:观察3D元素的角度(位置)
使用方法:
perspective-origin: left top;
perspective-origin: center center;
perspective-origin: 50% 50%;
perspective-origin: 0px 0px;
translate()3D位移
使用方法:
transform:translate3d(x,y,z);
transform:translateX();(X轴上的位移)
transform:translateY();(Y轴上的位移)
transform:translateZ();(Z轴上的位移)
注意: z不能为百分比
rotate()3D旋转
使用方法:
transform:rotateX();(数值为度0~360deg)
transform:rotateY();(数值为度0~360deg)
transform:rotateZ();(数值为度0~360deg)
scale()3D缩放
使用方法:
transform:scale3d(x,y,z);(缩放比例)
transform:scaleX();(X轴上的缩放)
transform:scaleY();(Y轴上的缩放)
transform:scaleZ();(Z轴上的缩放)
完整代码如下:
html代码:
<div class="box">
<ul class="minbox"><!-- 内层 -->
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ol class="maxbox"><!-- 外层 -->
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
css代码:
@charset "utf-8";
*{
margin:0;
padding:0;
}
body{
max-width: 100%;
min-width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-size:100% 100%;
position: absolute;
margin-left: auto;
margin-right: auto;
background: url(../imgs/bg.jpg) no-repeat;
}
li{
list-style: none;
}
.box{
width:200px;
height:200px;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-size:100% 100%;
position: absolute;
margin-left: 42%;
margin-top: 22%;
transform-style:preserve-3d;
transform:rotateX(13deg);
animation:move 10s linear infinite;/* 旋转速度,时间越短速度越快 */
}
.minbox{
width:100px;
height:100px;
position: absolute;
left:50px;
top:30px;
transform-style:preserve-3d;
}
.minbox li{
width:100px;
height:100px;
position: absolute;
left:0;
top:0;
}
.minbox li:nth-child(1){
background: url(../imgs/girl1.jpg);
background-size:100px 100px;
/*background-size: cover;*/
transform:translateZ(50px);
}
.minbox li:nth-child(2){
background: url(../imgs/girl2.jpg) no-repeat;
background-size:100px 100px;
transform:rotateX(180deg) translateZ(50px);
}
.minbox li:nth-child(3){
background: url(../imgs/girl3.jpg) no-repeat;
background-size:100px 100px;
transform:rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4){
background: url(../imgs/girl4.jpg) no-repeat;
background-size:100px 100px;
transform:rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5){
background: url(../imgs/girl5.jpg) no-repeat;
background-size:100px 100px;
transform:rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6){
background: url(../imgs/girl6.jpg) no-repeat;
background-size:100px 100px;
transform:rotateY(90deg) translateZ(50px);
}
.maxbox li:nth-child(1){
background: url(../imgs/girl1.jpg) no-repeat;
background-size:400px 400px;
transform:translateZ(50px);
}
.maxbox li:nth-child(2){
background: url(../imgs/girl2.jpg) no-repeat;
background-size:400px 400px;
transform:rotateX(180deg) translateZ(50px);
}
.maxbox li:nth-child(3){
background: url(../imgs/girl3.jpg) no-repeat;
background-size:400px 400px;
transform:rotateX(-90deg) translateZ(50px);
}
.maxbox li:nth-child(4){
background: url(../imgs/girl4.jpg) no-repeat;
background-size:400px 400px;
transform:rotateX(90deg) translateZ(50px);
}
.maxbox li:nth-child(5){
background: url(../imgs/girl5.jpg) no-repeat;
background-size:400px 400px;
transform:rotateY(-90deg) translateZ(50px);
}
.maxbox li:nth-child(6){
background: url(../imgs/girl6.jpg) no-repeat;
background-size:400px 400px;
transform:rotateY(90deg) translateZ(50px);
}
.maxbox{
width: 800px;
height: 400px;
position: absolute;
left: 0;
top: -20px;
transform-style: preserve-3d;
}
.maxbox li{
width: 200px;
height: 200px;
background: #fff;
border:1px solid #ccc;
position: absolute;
left: 0;
top: 0;
opacity: 0.2;
transition:all 1s ease;
}
.maxbox li:nth-child(1){
transform:translateZ(100px);
}
.maxbox li:nth-child(2){
transform:rotateX(180deg) translateZ(100px);
}
.maxbox li:nth-child(3){
transform:rotateX(-90deg) translateZ(100px);
}
.maxbox li:nth-child(4){
transform:rotateX(90deg) translateZ(100px);
}
.maxbox li:nth-child(5){
transform:rotateY(-90deg) translateZ(100px);
}
.maxbox li:nth-child(6){
transform:rotateY(90deg) translateZ(100px);
}
.box:hover ol li:nth-child(1){
transform:translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.9;
left: -100px;
top: -100px;
}
.box:hover ol li:nth-child(2){
transform:rotateX(180deg) translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.9;
left: -100px;
top: -100px;
}
.box:hover ol li:nth-child(3){
transform:rotateX(-90deg) translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.9;
left: -100px;
top: -100px;
}
.box:hover ol li:nth-child(4){
transform:rotateX(90deg) translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.9;
left: -100px;
top: -100px;
}
.box:hover ol li:nth-child(5){
transform:rotateY(-90deg) translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.9;
left: -100px;
top: -100px;
}
.box:hover ol li:nth-child(6){
transform:rotateY(90deg) translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.9;
left: -100px;
top: -100px;
}
@keyframes move{
0%{
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
100%{
transform: rotateX(720deg) rotateY(360deg) rotateZ(360deg);
}
}
效果: