用CSS构建一个旋转的立方体

最新推荐文章于 2023-12-21 10:17:30 发布

BoomShaKa_S

最新推荐文章于 2023-12-21 10:17:30 发布

阅读量364

点赞数 2

CC 4.0 BY-SA版权

分类专栏： CSS实践文章标签： CSS构建立方体 CSS构建旋转的立方体

本文链接：https://blog.youkuaiyun.com/weixin_41350225/article/details/84873213

CSS实践专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍如何使用CSS构建并实现一个可交互的3D立方体动画，包括立方体的构建、定位、旋转及动画效果实现。

话不多说，先上效果图
在这里插入图片描述

实现步骤

①先构建一个立方体

创建立方体的六面，每个div都代表了一个面
<section>
        <div class="top"></div>			//上
        <div class="bottom"></div>		//下
        <div class="left"></div>			//左
        <div class="right"></div>		//右
        <div class="before"></div>		//前
        <div class="after"></div>		//后
</section>

给每个面都设置一样的宽高与一个边框，让我们直观的看到六个面
section div{
    width: 4rem;
    height: 4rem;
    border: 0.001rem solid red;			//红色的边框
｝

通过定位实现六个面完全重叠到一起
section{
    position: relative;			//给父元素加相对定位
}
section div{
    width: 4rem;
    height: 4rem;
    border: 0.001rem solid red;	
    position: absolute;			//给子元素加绝对定位
}

section{
    width: 4rem;
    height: 4rem;
    /* 设置父元素的大小和每个面的大小一样，以确保其和每个面的中心位置一样【必须】，然后让父盒子水平居中垂直margin为100px */
    margin: 1rem auto;
    position: relative;
}
section div{
    width: 4rem;
    height: 4rem;
    border: 0.001rem solid red;
    position: absolute;
    opacity: 0.5;
    transition: 5s;
}

②通过位移+旋转让每个面到相应的位置【上下左右前后】

section:hover .top{
    transform: translateY(-2rem) rotateX(90deg);
    background-image: url(./images/3.jpg);	//设置背景图片
    background-size: 100%;					//图片进行填充
}
section:hover .bottom{
    transform: translateY(2rem) rotateX(90deg);
    background-image: url(./images/4.jpg);
    background-size: 100%;
}
section:hover .left{
    transform: translateX(2rem) rotateY(90deg);
    background-image: url(./images/2.jpg);
    background-size: 100%;
}
section:hover .right{
    transform: translateX(-2rem) rotateY(-90deg);
    background-image: url(./images/5.jpg);
    background-size: 100%;
}
section:hover .before{
    transform: translateZ(2rem);
    background-image: url(./images/1.jpg);
    background-size: 100%;
}
section:hover .after{
    transform: translateZ(-2rem);
    background-image: url(./images/6.jpg);
    background-size: 100%;
}

同时给每一个面设置5s的位移，这样到鼠标移入时就能缓慢的看到其变化移动
section div{
    width: 4rem;
    height: 4rem;
    border: 0.001rem solid red;
    position: absolute;
    opacity: 0.5;		//设置图片的透明度，使我们可以看到后边图片的变换
    transition: 5s;	//设置过渡时间
}

在这里插入图片描述
这样就可以看到变换的过程了

通过给父元素设置透视距离（宽高的3-5倍）
body{
    font-size: 0.16rem;
    transform-style: preserve-3d;	//设置为3d模型
    -webkit-perspective: 10rem;		//透视距离
}

我们就接着上面的例子来说，要实现旋转的立方体，其实只要让包裹这六个面的父盒子旋转就可以了

③创建一个父元素旋转动画，并在鼠标移入父元素时开始进行调用

@keyframes rotatexyz {
    0% { transform: rotatex(0deg) }
    30% { transform: rotatex(360deg) }
    31% { transform: rotatex(0deg) }
    60% { transform: rotatey(360deg)}
    61% { transform: rotatey(0deg) }
    80% { transform: rotatez(360deg)}
    81% { transform: rotatez(0deg)}
    100% { transform: rotatez(45deg) rotatex(45deg) rotatey(45deg)}
}
section:hover{
    animation: rotatexyz 5s 5s;
    transform-style:preserve-3d;
    //由于组成立方体的过渡需要花费5秒，所以这里延迟执行5秒
}

div:hover{
	animation: rotatexyz 5s 5s;
	transform-style:preserve-3d;
	//在动画执行时设置css样式属性transform-style，让旋转变为3D旋转
}

注意：如果不加transform-style:preserve-3d;的话，是没办法看到3D旋转的效果的
之后大功告成，上源码
HTML页面

<!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>立方体</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <section>
        <div class="top"></div>
        <div class="bottom"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="before"></div>
        <div class="after"></div>
    </section>
</body>
</html>

CSS页面

html{
    font-size: 100px;
}
body{
    font-size: 0.16rem;
    transform-style: preserve-3d;
    -webkit-perspective: 10rem;
}
section{
    width: 4rem;
    height: 4rem;
    margin: 1rem auto;
    position: relative;
}
section div{
    width: 4rem;
    height: 4rem;
    border: 0.001rem solid red;
    position: absolute;
    opacity: 0.5;
    transition: 5s;
}
section:hover .top{
    transform: translateY(-2rem) rotateX(90deg);
    background-image: url(./images/3.jpg);
    background-size: 100%;
}
section:hover .bottom{
    transform: translateY(2rem) rotateX(90deg);
    background-image: url(./images/4.jpg);
    background-size: 100%;
}
section:hover .left{
    transform: translateX(2rem) rotateY(90deg);
    background-image: url(./images/2.jpg);
    background-size: 100%;
}
section:hover .right{
    transform: translateX(-2rem) rotateY(-90deg);
    background-image: url(./images/5.jpg);
    background-size: 100%;
}
section:hover .before{
    transform: translateZ(2rem);
    background-image: url(./images/1.jpg);
    background-size: 100%;
}
section:hover .after{
    transform: translateZ(-2rem);
    background-image: url(./images/6.jpg);
    background-size: 100%;
}
@keyframes rotatexyz {
    0% { transform: rotatex(0deg) }
    30% { transform: rotatex(360deg) }
    31% { transform: rotatex(0deg) }
    60% { transform: rotatey(360deg)}
    61% { transform: rotatey(0deg) }
    80% { transform: rotatez(360deg)}
    81% { transform: rotatez(0deg)}
    100% { transform: rotatez(45deg) rotatex(45deg) rotatey(45deg)}
}
section:hover{
    animation: rotatexyz 5s 5s;
    transform-style:preserve-3d;
}