CSS布局案例 2-51 立方体旋转效果

原创已于 2024-01-04 17:01:41 修改 · 575 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

于 2021-04-25 19:19:58 首次发布

Web前端开发专栏收录该内容

13 篇文章

订阅专栏

文章目录

前言
实现过程

前言

使用css3实现立方体旋转效果。

实现过程

1.步骤

立方体旋转效果实现步骤:
	  1、使用ul li创建立方体的6个面，用绝对定位方式将6个面重合在一块
	  2、保持一个面不动，移动和旋转其他5个面，组成立方体，使用3d效果和景深的方式实现立体效果（rotate旋转,X为水平轴，Y为垂直轴，Z为眼睛垂直屏幕的轴）
	  3、设置动画效果，沿着Y轴旋转，旋转原点为X\Y\Z的中心点

2.代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 500px;
				height: 500px;
				border: 3px #7195B7 solid;
				margin: 100px auto;
				/* 景深,看物体的远近 */
				perspective: 1500px;
			}
			.box ul{
				width: 300px;
				height: 300px;
				border: 1px #A9A9A9 solid;
				margin: 100px;
				/* 父元素设置3d效果 */
				transform-style: preserve-3d;
				/* 旋转动画效果 */
				animation: move 2s infinite linear;
				/* 设置Y轴旋转的原点 */
				transform-origin: center center 150px; 
			}
			.box ul li{
				width: 300px;
				height: 300px;
				list-style: none;
				text-align: center;
				line-height: 300px;
				font-size: 35px;
				color: #FFFFFF;
				/* 多个li元素组合在一起 */
				position: absolute;
			}
			/* 子元素移动旋转,组成正方体 */
			.box ul li:nth-of-type(1){
				background-color: red;
				opacity: 0.4;
			}
			.box ul li:nth-of-type(2){
				background-color: blue;
				transform: translateX(-300px) rotateY(90deg);
                transform-origin: right;
				opacity: 0.4;
			}
			.box ul li:nth-of-type(3){
				background-color: green;
				transform: translateY(300px) rotateX(90deg);
				transform-origin: top;
				opacity: 0.4;
			}
			.box ul li:nth-of-type(4){
				background-color: greenyellow;
				transform: translateY(-300px) rotateX(-90deg);
				transform-origin: bottom;
				opacity: 0.4;
			}
			.box ul li:nth-of-type(5){
				background-color: firebrick;
				transform: translateX(300px) rotateY(-90deg);
				transform-origin: left;
				opacity: 0.4;
			}
			.box ul li:nth-of-type(6){
				background-color: palevioletred;
				transform: translateZ(300px);
				opacity: 0.4;
			}
			/* 设置沿着Y轴旋转 */
			@keyframes move{
				from{
					transform: rotateY(0deg);
				}
				to{
					transform: rotateY(360deg);
				}
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
			</ul>
		</div>
	</body>
</html>

3.效果

在这里插入图片描述