css3之实现简单的正方体转动动画

最新推荐文章于 2024-04-10 09:21:27 发布

等周末的爱码士

最新推荐文章于 2024-04-10 09:21:27 发布

阅读量1.1k

点赞数 1

分类专栏：前端笔记文章标签： css3 html css 正方体动画

本文链接：https://blog.csdn.net/sxjit/article/details/104780097

版权

前端笔记专栏收录该内容

18 篇文章 3 订阅

订阅专栏

实现正方体转动有很多方式，但开发中最实在的还是用css3开发，内容涉及过渡、转换，有兴趣可学习使自己更强！

- 第一步：创建结构

<div class="cube">
	<div class="box">
        <div class="child-th1">1</div>
        <div class="child-th2">2</div>
        <div class="child-th3">3</div>
        <div class="child-th4">4</div>
		<div class="child-th5">5</div>
		<div class="child-th6">6</div>
	</div>
</div>

其中box内容可看做3d主体元素，而cube则是3D元素的一个载体。为什么需要它？

- 第二步：建立3D环境

.cube {
	width: 200px;
    height: 200px;
    margin: 200px auto;
    perspective: 800px;
}
.box {
	transform-style: preserve-3d;
    width: 200px;
	height: 200px;
	transition: 5s linear;
	position: relative;
}

宽高根据自己喜好不定，但cube中的perspective属性不能少，它也回答了刚刚的问题。这个属性是规定3D元素到可视面的距离，我们肉眼可见的3D效果就是与可视面发生的视觉差，这里我也不是专业的就不吹了，有兴趣可以了解了解视觉学。简单说，如果没有perspective属性，下面的3D元素将无法实现。一般我设置800-1000左右。
box中的transform-style: preserve-3d;属性值规定了div动画内容为3D样式；transition: 5s linear;属性值规定了动画时间5秒、速度匀速。

- 设置样式
先给正方体六个面一个统一样式，用定位让它们叠放在一起，设置背景颜色、字体大小、字体颜色以及透明度：

.box div {
	width: 200px;
	line-height: 200px;
	border: 1px solid #999999;
	position: absolute;
	font-size: 34px;
	color: white;
	text-align: center;
	background-color: black;
	opacity: 0.8;
}

然后就是对每个面进行角度转换，位置偏移来构成一个正方体：

.child-th1{
	 transform: translateZ(-101px);
}
.child-th2{
	transform: translateZ(101px);
}
.child-th3{
	transform: rotateY(90deg) translateZ(101px);
}
.child-th4{
	transform: rotateY(-90deg) translateZ(101px);
}
.child-th5{
	transform: rotateX(90deg) translateZ(-101px);
}
.child-th6{
	transform: rotateX(90deg) translateZ(101px);
}

- 设置动画
最后，在box的hover伪类上设置正方体转动动画：

.box:hover{
	transform: rotateY(360deg);
}

这样一个简单的正方体自转动画就实现了。
下面是完整的源代码，有兴趣的朋友可以了解模仿：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cube</title>
</head>
<body>
    <div class="cube">
        <div class="box">
            <div class="child-th1">1</div>
            <div class="child-th2">2</div>
            <div class="child-th3">3</div>
            <div class="child-th4">4</div>
            <div class="child-th5">5</div>
            <div class="child-th6">6</div>
        </div>
    </div>
</body>
<style>
    .cube {
        width: 200px;
        height: 200px;
        margin: 200px auto;
        perspective: 800px;
    }
    .box {
        transform-style: preserve-3d;
        width: 200px;
        height: 200px;
        transition: 5s linear;
        position: relative;
    }
    .box div {
        width: 200px;
        line-height: 200px;
        border: 1px solid #999999;
        position: absolute;
        font-size: 34px;
        color: white;
        text-align: center;
        background-color: black;
        opacity: 0.8;
    }
    .child-th6{
        transform: rotateX(90deg) translateZ(101px);
    }
    .child-th5{
        transform: rotateX(90deg) translateZ(-101px);
    }
    .child-th4{
        transform: rotateY(-90deg) translateZ(101px);
    }
    .child-th3{
        transform: rotateY(90deg) translateZ(101px);
    }
    .child-th2{
        transform: translateZ(101px);
    }
    .child-th1{
        transform: translateZ(-101px);
    }
    .box:hover{
        transform: rotateY(360deg);
    }
</style>
</html>