master

分支 (1)

管理

管理

master

transform
/
index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title>demo</title>
    <!-- <link rel="stylesheet" href="./css/reset.css"> -->
    <style>
        html{
            perspective: 1000px;
        }
        .cube{
            width: 200px;
            height: 200px;
            position: relative;
            margin: 200px auto;
            /* 设置3d变形效果 */
            transform-style: preserve-3d;
            transform: rotateY(45deg) rotateX(45deg);
            /* background-color: rosybrown; */
            animation: run 2s linear infinite;

        }
        .cube div{
            width: 200px;
            height: 200px;
            /* 设置元素透明度 */
            /* opacity: 0.7; */
            position: absolute;
        }
        .cube .box1{
            transform: rotateY(-90deg) translateZ(100px);
			background: yellow;
        }
        .cube .box2{
            transform: rotateY(90deg) translateZ(100px);
			background: green;
        }
        .box3{
            transform: rotateY(180deg) translateZ(100px);
			background: red;
        }
        .cube .box4{
            transform: rotateX(90deg) translateZ(100px);
			background: rebeccapurple;
        }
        .cube .box5{
            transform: rotateX(-90deg) translateZ(100px);
			background: blue;
        }
        .box6{
            transform: translateZ(100px);
			background: burlywood;
        }


        @keyframes run{
            from{
                transform: rotateX(0deg) rotateY(0deg);
            }
            to{
                transform: rotateX(360deg) rotateY(360deg);
            }
        }

		.bg{
			height: 200px;
			width: ;
		}
    </style>
</head>
<body>
    <div class="cube">
        <div class="box1">
            <img src="./img/a.jpg" alt="">
        </div>
        <div class="box2">
            <img src="./img/a.jpg" alt="">
        </div>
        <div class="box3">
            <img src="./img/a.jpg" alt="">
        </div>
        <div class="box4">
            <img src="./img/a.jpg" alt="">
        </div>
        <div class="box5">
            <img src="./img/a.jpg" alt="">
        </div>
        <div class="box6">
            <img src="./img/14/6.jpg" alt="">
        </div>
    </div>
</body>
</html>