2023新年炫酷3d立体旋转我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛-2023新年炫酷

我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

在 HTML 中创建 3D 立体旋转效果非常简单。你需要使用 <div> 元素和 CSS 3D 转换属性来实现这个效果。

首先，你需要创建一个 <div> 元素，然后使用 CSS 的 transform 属性来设置 3D 转换。你可以使用 rotateX、rotateY 或 rotateZ 来旋转元素。

下面是一个简单的例子，使用 rotateY 旋转了一个 <div> 元素：

<div style="transform: rotateY(180deg);">
  <!-- Your content here -->
</div>

你还可以使用 CSS 动画来使旋转动画更流畅。下面是一个使用 CSS 动画的例子：

.rotate {
  animation: rotation 2s infinite linear;
}

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

然后，你可以在 HTML 中使用 class 属性将该类添加到要旋转的元素上：

<div class="rotate">
  <!-- Your content here -->
</div>

使用这些技术，你就可以创建炫酷的 3D 立体旋转效果了！下面是一个简单的例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>06 炫酷3d立体旋转</title>
		<link rel="stylesheet" type="text/css" href="index.css"/>
	</head>
	<body>
		<div class="main">
			<!--背景 -->
			<img src="img/2.jpg" class="bg">
			
			<div class="cubeBox">
				<!-- 小立方 -->
				<ul class="cube">
					
					<li><img src="img/2.jpg"></li>
					<li><img src="img/2.jpg"></li>
					<li><img src="img/2.jpg"></li>
					<li><img src="img/2.jpg"></li>
					<li><img src="img/2.jpg"></li>
					<li><img src="img/2.jpg"></li>
				</ul>
				<!-- 大立方 -->
				<ul class="cube bigCube">
					
					<li><img src="img/2.jpg" class="bigCubeImg"></li>
					<li><img src="img/2.jpg" class="bigCubeImg"></li>
					<li><img src="img/2.jpg" class="bigCubeImg"></li>
					<li><img src="img/2.jpg" class="bigCubeImg"></li>
					<li><img src="img/2.jpg" class="bigCubeImg"></li>
					<li><img src="img/2.jpg" class="bigCubeImg"></li>
				</ul>
			</div>
		</div>
		
	</body>
</html>

css样式代码：

*{
	margin: 0px;
	padding: 0px;
}

li{
	list-style: none;
}
html,body{
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.main{
	width: 100%;
	height: 100%;
	perspective: 800;
	
}
.cubeBox{
	width: 200px;
	height: 200px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -100px 0 0 -100px;
	transform-style: preserve-3d;
}
.bg{
	width: 100%;
	height: 100%;
	object-fit: fill;
}



.cube{
	width: 100px;
	height: 100px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -50px 0 0 -50px;
	transform-style: preserve-3d;
	transform: rotateX(-10deg) rotateY(45deg);
	animation: move 4s linear infinite ;
}

.cube li {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transition: all 1s ease;
	 
}
.cube li video{
	width: 100%;
	height: 100%;
}
.cube li:nth-child(1){
	transform: rotateX(0deg) translateZ(50px);
}
.cube li:nth-child(2){
	transform: rotateX(180deg) translateZ(50px);
}
.cube li:nth-child(3){
	transform: rotateX(-90deg) translateZ(50px);
}
.cube li:nth-child(4){
	transform: rotateX(90deg) translateZ(50px);
}

.cube li:nth-child(5){
	transform: rotateY(-90deg) translateZ(50px);
}
.cube li:nth-child(6){
	transform: rotateY(90deg) translateZ(50px);
}

.bigCube{
	width: 200px;
	height: 200px;
	margin: -100px 0 0 -100px;
}

.bigCube li:nth-child(1){
	transform: rotateX(0deg) translateZ(100px);
}
.bigCube li:nth-child(2){
	
	transform: rotateX(180deg) translateZ(100px);
}
.bigCube li:nth-child(3){
	transform: rotateX(-90deg) translateZ(100px);
}
.bigCube li:nth-child(4){
	transform: rotateX(90deg) translateZ(100px);
}
.bigCube li:nth-child(5){
	transform: rotateY(-90deg) translateZ(100px);
}
.bigCube li:nth-child(6){
	transform: rotateY(90deg) translateZ(100px);
}
/* .bigCube li:nth-child(1){
	transform: rotateX(360deg) translateZ(100px);
}
.bigCube li:nth-child(2){
	transform: rotateX(-180deg) translateZ(100px);
}
.bigCube li:nth-child(3){
	transform: rotateX(90deg) translateZ(100px);
}
.bigCube li:nth-child(4){
	transform: rotateX(-90deg) translateZ(100px);
}
.bigCube li:nth-child(5){
	transform: rotateY(90deg) translateZ(100px);
}
.bigCube li:nth-child(6){
	transform: rotateY(-90deg) translateZ(100px);
} */



@keyframes move{
	0%{
		transform: rotateX(-13deg) rotateY(0deg);
	}
	100%{
		transform: rotateX(-13deg) rotateY(360deg);
	}
}


.cubeBox:hover .bigCube li:nth-child(1){
	transform: rotateX(0deg) translateZ(200px);
}
.cubeBox:hover .bigCube li:nth-child(2){
	transform: rotateX(180deg) translateZ(200px);
}
.cubeBox:hover .bigCube li:nth-child(3){
	transform: rotateX(-90deg) translateZ(200px);
}
.cubeBox:hover .bigCube li:nth-child(4){
	transform: rotateX(90deg) translateZ(200px);
}
.cubeBox:hover .bigCube li:nth-child(5){
	transform: rotateY(-90deg) translateZ(200px);
}
.cubeBox:hover .bigCube li:nth-child(6){
	transform: rotateY(90deg) translateZ(200px);
}

.cube img{
	width: 100px;
	height: 100px;
}

.bigCube .bigCubeImg{
	width: 200px;
	height: 200px;
}

2023新年 炫酷3d立体旋转

码上掘金

2023新年炫酷3d立体旋转