<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D变换</title>
<style type="text/css">
.rongqi{
/*设置容器为3D容器*/
transform-style: preserve-3d;
background-color: gray;
opacity: 0.5;
height: 600px;
/*border: 1px blue solid;*/
position: relative;
transition: all 300s linear;
/*scaleZ只能对3D容器有作用，普通的2维空间没有厚度（Z轴）的概念
3D容器放大Z的表现就是原本的Z轴30px会成倍的增长（scaleZ（2）30变60）*/
/*transform: rotateY(75deg) scaleZ(12);*/
}
.rongqi:hover{
transform: rotateX(36000deg) rotateY(36000deg) rotateZ(36000deg);
}
.jingshen{
/*景深
我们眼睛到3D容器面的距离*/
perspective: 1200px;
/*可以调整眼睛所在的位置，不同的位置看同一个东西看到的形状不一样*/
perspective-origin: 500px 300px;
}
.blueDiv,.redDiv,.yellowDiv,.greenDiv,.caoDiv,.sbDiv{
width: 200px;
height: 200px;
position: absolute;
top: 200px;
left: 50%;
margin-left: -100px;
opacity: 0.5;
}
.redDiv{
transform: translateZ(-100px) rotateY(-90deg);
background-color: red;
transform-origin: left;
/*transform: translateZ(30px);*/
}
.blueDiv{
background-color: blue;
transform: translateZ(-100px) rotateX(90deg);
transform-origin: top;
}
.yellowDiv{
background-color: yellow;
transform: translateZ(-100px) rotateX(-90deg);
transform-origin: bottom;
}
.greenDiv{
background-color: green;
transform: translateZ(-100px) rotateY(90deg);
transform-origin: right;
}
.caoDiv{
background-color: tan;
transform: translateZ(-100px);
}
.sbDiv{
background-color: darkorchid;
transform: translateZ(100px);
}
</style>
</head>
<body>
<div class="jingshen">
<div class="rongqi">
<div class="redDiv"> </div>
<div class="blueDiv"></div>
<div class="yellowDiv"> </div>
<div class="greenDiv"></div>
<div class="caoDiv"> </div>
<div class="sbDiv"></div>
</div>
</div>
</body>
</html>
网友评论