js实现3D魔方

最新推荐文章于 2024-03-15 14:53:05 发布

Kidd6688

最新推荐文章于 2024-03-15 14:53:05 发布

阅读量588

点赞数

分类专栏： js 文章标签： HTML CSS 3D变换动画魔方效果

本文链接：https://blog.csdn.net/weixin_44020995/article/details/124060343

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D魔方</title>
    <link rel="stylesheet" href="css/index.css">
    <style>
    	img{
    		width: 200px;
    		height: 200px;
    	}
    </style>
    
</head>
<body>
    <div class="wrap">
        <ul>
            <li><img src="img/01.jpg"></li>
            <li><img src="img/02.jpg"></li>
            <li><img src="img/03.jpg"></li>
            <li><img src="img/04.jpg"></li>
            <li><img src="img/05.jpg"></li>
            <li><img src="img/06.jpg"></li>
        </ul>
    </div>
</body>
</html>

CSS

/* 清除默认样式 */
* {
    margin: 0;
    padding: 0;
}

.wrap {
    width: 200px;
    height: 200px;
    margin: 150px auto;
    /* 设置景深 */
    perspective: 3000px;
}

.wrap ul {
    list-style: none;
    width: 100%;
    height: 100%;
    position: relative;
    /* 设置3d背景台 ,让子元素有3D效果*/
    transform-style: preserve-3d;
    /* 测试使用 */
    transform: rotateY(45deg) rotateX(45deg);
    /* 执行动画 */
    animation: donghua 3s linear 0s infinite;
}

.wrap ul li {
    width: 100%;
    height: 100%;
    /* 子绝父相 */
    position: absolute;
    border: 1px solid #000;

}

.wrap ul li:nth-child(1) {
    background: url(../images/01.jpg);
    transform: translateZ(100px);
    background-size: 200px 200px;
}

.wrap ul li:nth-child(2) {
    background: url(../images/02.jpg);
    transform: translateZ(-100px);
    background-size: 200px 200px;
}

.wrap ul li:nth-child(3) {
    background: url(../images/03.jpg);
    transform: translateX(-100px) rotateY(90deg);
    background-size: 200px 200px;
}

.wrap ul li:nth-child(4) {
    background: url(../images/04.jpg);
    transform: translateX(100px) rotateY(90deg);
    background-size: 200px 200px;
}

.wrap ul li:nth-child(5) {
    background: url(../images/05.jpg);
    transform: translateY(-100px) rotateX(90deg);
    background-size: 200px 200px;
}

.wrap ul li:nth-child(6) {
    background: url(../images/06.jpg);
    transform: translateY(100px) rotateX(90deg);
    background-size: 200px 200px;
}

/* 调用动画 */
@keyframes donghua {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }

    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

效果展示

魔方效果