两个立方体旋转

最新推荐文章于 2022-10-11 11:24:32 发布
maxiaoxin1314
最新推荐文章于 2022-10-11 11:24:32 发布
阅读量311
点赞数 4
本文链接：https://blog.csdn.net/maxiaoxin1314/article/details/89930161
版权
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D立方体</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            position: absolute;
            /*绝对定位后就不是块元素了，可以模拟*/
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
            animation:aa 4s infinite linear;
            transform:rotate3d(1,1,0,-30deg);
            -webkit-transform-style:preserve-3d;

        }
        @-webkit-keyframes aa{
        	0%{
        		-webkit-transform:rotateY(-600deg) rotateX(300deg);
        		 /*translateX(200px)*/
        	}
        	100%{
        		-webkit-transform:rotateY(200deg) rotateX(-300deg);
        	}
        }
        .box1 .child1{
            width: 200px;
            height: 200px;
            text-align: center;
            line-height:200px;
            font-size: 3em;
            position: absolute;
            transition:all 1s;
        }
        .box1 .child1:nth-child(1){
            background: rgba(45,145,230,0.4);
            /*transform:rotateX(90deg) translateZ(100px);*/
            transform:translateY(-100px) rotateX(90deg);
        }
        .box1 .child1:nth-child(2){
            background: rgba(0,145,100,0.4);
            /*transform:rotateY(-90deg) translateZ(100px);*/
            transform:translateX(-100px) rotateY(-90deg);
        }
        .box1 .child1:nth-child(3){
            background: rgba(100,45,230,0.4);
            /*transform:rotateY(90deg) translateZ(100px);*/
            transform:translateX(100px) rotateY(90deg);
        }

        .box1 .child1:nth-child(4){
            background: rgba(200,145,45,0.4);
            /*transform:rotateX(-90deg) translateZ(100px);*/
            transform:translateY(100px) rotateX(-90deg);
        }
        .box1 .child1:nth-child(5){
            background: rgba(150,0,70,0.4);
            transform:translateZ(100px);
        }
        .box1 .child1:nth-child(6){
            background: rgba(160,145,60,0.4);
            /*transform:rotateX(180deg) translateZ(100px);*/
            transform:translateZ(-100px) rotateY(180deg);
        }
          


        .box1:hover .child1:nth-child(1){
            background: rgba(45,145,230,0.4);
            /*transform:rotateX(90deg) translateZ(100px);*/
            transform:translateY(-200px) rotateX(90deg);
        }
        .box1:hover .child1:nth-child(2){
            background: rgba(0,145,100,0.4);
            /*transform:rotateY(-90deg) translateZ(100px);*/
            transform:translateX(-200px) rotateY(-90deg);
        }
        .box1:hover .child1:nth-child(3){
            background: rgba(100,45,230,0.4);
            /*transform:rotateY(90deg) translateZ(100px);*/
            transform:translateX(200px) rotateY(90deg);
        }

        .box1:hover .child1:nth-child(4){
            background: rgba(200,145,45,0.4);
            /*transform:rotateX(-90deg) translateZ(100px);*/
            transform:translateY(200px) rotateX(-90deg);
        }
        .box1:hover .child1:nth-child(5){
            background: rgba(150,0,70,0.4);
            transform:translateZ(200px);
        }
        .box1:hover .child1:nth-child(6){
            background: rgba(160,145,60,0.4);
            /*transform:rotateX(180deg) translateZ(100px);*/
            transform:translateZ(-200px) rotateY(180deg);
        }



        .box2{
            width: 100px;
            height: 100px;
            position: absolute;
            /*绝对定位后就不是块元素了，可以模拟*/
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
            transform:rotate3d(1,1,0,0deg);
            -webkit-transform-style:preserve-3d;

        }
        .box2 .child2{
            width: 100px;
            height: 100px;
            text-align: center;
            line-height:100px;
            font-size: 2em;
            position: absolute;
            
        }
        .box2 .child2:nth-child(1){
            background: rgba(45,145,230,0.4);
            /*transform:rotateX(90deg) translateZ(100px);*/
            transform:translateY(-50px) rotateX(90deg);
        }
        .box2 .child2:nth-child(2){
            background: rgba(0,145,100,0.4);
            /*transform:rotateY(-90deg) translateZ(100px);*/
            transform:translateX(-50px) rotateY(-90deg);
        }
        .box2 .child2:nth-child(3){
            background: rgba(100,45,230,0.4);
            /*transform:rotateY(90deg) translateZ(100px);*/
            transform:translateX(50px) rotateY(90deg);
        }

        .box2 .child2:nth-child(4){
            background: rgba(200,145,45,0.4);
            /*transform:rotateX(-90deg) translateZ(100px);*/
            transform:translateY(50px) rotateX(-90deg);
        }
        .box2 .child2:nth-child(5){
            background: rgba(150,0,70,0.4);
            transform:translateZ(50px);
        }
        .box2 .child2:nth-child(6){
            background: rgba(160,145,60,0.4);
            /*transform:rotateX(180deg) translateZ(100px);*/
            transform:translateZ(-50px) rotateY(180deg);
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="child1">top</div>
    <div class="child1">left</div>
    <div class="child1">right</div>
    <div class="child1">btm</div>
    <div class="child1">face</div>
    <div class="child1">back</div>
    <div class="box2">
    	<div class="child2">top</div>
        <div class="child2">left</div>
        <div class="child2">right</div>
        <div class="child2">btm</div>
        <div class="child2">face</div>
        <div class="child2">back</div>
    </div>
</div>
</body>
</html>