效果
3D.gif
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html{
height: 100%;
}
body{
height: 100%;
background: #222222;
perspective: 1000px;
}
* {
margin: 0;
padding: 0;
}
/* 方块 */
.box {
width: 200px;
height: 200px;
background: rgba(0, 0, 0, 0.842);
color: #ffffff;
border-radius: 10px;
box-sizing: border-box;
border: 4px solid #585656e7;
padding: 10px;
perspective-origin: 50% 50%;
}
/* 圆点 */
.num {
width: 30px;
height: 30px;
border-radius: 50%;
background: #ffffff;
border: 3px solid #9795957c;
}
/* 一、 */
.one-box {
display: flex;
border-radius: 10px;
justify-content: center;
align-items: center;
}
/* 二、 */
.two-box {
display: flex;
justify-content: space-between;
}
.two-box-num2 {
align-self: flex-end;
}
/* 三、 */
.three-box {
display: flex;
justify-content: space-between;
}
.three-box-num2 {
align-self: center;
}
.three-box-num3 {
align-self: flex-end;
}
/* 四、 */
.four-box {
display: flex;
justify-content: space-between;
}
.four-box-box1 {
display: flex;
justify-content: space-between;
flex-direction: column;
}
/* 五、 */
.five-box {
display: flex;
justify-content: space-between;
}
.five-box-box1 {
display: flex;
justify-content: space-between;
flex-direction: column;
}
.five-box-box2 {
display: flex;
justify-content: center;
align-items: center;
}
/* 六、 */
.six-box {
display: flex;
justify-content: space-between;
}
.six-box-box1 {
display: flex;
justify-content: space-between;
flex-direction: column;
}
/* 3D效果 */
.bigBox{
width: 200px;
position: relative;
transform-style: preserve-3d;
animation: move 4s linear infinite alternate;
margin: 400px auto;
perspective-origin: center center;
}
.bigBox > div {
transition: all 0.25s;
}
.bigBox .box {
position: absolute;
top:-100px;
font-size: 25px;
text-align: center ;
line-height: 200px;
}
.one-box{
transform: translateZ(100px);
}
.two-box{
transform: rotateY(180deg) rotate(180deg) translateZ(100px);
}
.three-box{
transform: rotateY(90deg) translateZ(100px);
}
.four-box{
transform: rotateY(270deg) translateZ(100px);
}
.five-box{
transform: rotateX(90deg) translateZ(100px);
}
.six-box{
transform: rotateX(270deg) translateZ(100px);
}
@keyframes move {
0%{
transform: rotateX(0deg) rotateY(0deg);
}
50%{
transform: rotateX(360deg) rotateY(0deg);
}
100%{
transform: rotateX(360deg) rotateY(360deg);
}
}
.warp:hover {
animation: move 2s linear infinite alternate;
}
.wrap:hover .oneChange{
transform: translateZ(200px);
}
.wrap:hover .twoChange{
transform: rotateY(180deg) rotate(180deg) translateZ(200px);
}
.wrap:hover .threeChange{
transform: rotateY(90deg) translateZ(200px);
}
.wrap:hover .fourChange{
transform: rotateY(270deg) translateZ(200px);
}
.wrap:hover .fiveChange{
transform: rotateX(90deg) translateZ(200px);
}
.wrap:hover .sixChange{
transform: rotateX(270deg) translateZ(200px);
}
.wrap {
margin: 0 auto;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="bigBox">
<!-- 一、 -->
<div class="one-box box oneChange">
<div class="one-box-num1 num"></div>
</div>
<!-- 二、 -->
<div class="two-box box twoChange">
<div class="two-box-num1 num"></div>
<div class="two-box-num2 num"></div>
</div>
<!-- 三、 -->
<div class="three-box box threeChange">
<div class="three-box-num1 num"></div>
<div class="three-box-num2 num"></div>
<div class="three-box-num3 num"></div>
</div>
<!-- 四、 -->
<div class="four-box box fourChange">
<div class="four-box-box1">
<div class="four-box-num1 num"></div>
<div class="four-box-num2 num"></div>
</div>
<div class="four-box-box1">
<div class="four-box-num3 num"></div>
<div class="four-box-num4 num"></div>
</div>
</div>
<!-- 五、 -->
<div class="five-box box fiveChange">
<div class="five-box-box1">
<div class="five-box-num1 num"></div>
<div class="five-box-num2 num"></div>
</div>
<div class="five-box-box2">
<div class="five-box-num5 num"></div>
</div>
<div class="five-box-box1">
<div class="five-box-num3 num"></div>
<div class="five-box-num4 num"></div>
</div>
</div>
<!-- 六、 -->
<div class="six-box box sixChange">
<div class="six-box-box1">
<div class="six-box-num1 num"></div>
<div class="six-box-num2 num"></div>
<div class="six-box-num3 num"></div>
</div>
<div class="six-box-box1">
<div class="six-box-num4 num"></div>
<div class="six-box-num5 num"></div>
<div class="six-box-num6 num"></div>
</div>
</div>
</div>
</div>
</body>
</html>
网友评论