css3D动画

最新推荐文章于 2022-10-29 21:03:34 发布
最新推荐文章于 2022-10-29 21:03:34 发布
阅读量293 收藏
点赞数 3
文章标签： html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45031640/article/details/91917949
版权

前言

本篇文章给大家带来的内容是关于css实现3d动画特效的代码实例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

属性

perspective ：透距离，单位像素（值越小，透视距离越近，效果越明显）：设置父元素上

perspective-origin: 设置透视点的位置

transform-style :指定某元素的子元素是位于三维空间内，取值：flat | preserve-3d

图视点

##一、写一个简单的立方体

1.一个长方体有6个面，我们写6个div，并用一个父元素包裹起来。

<div class="mofang">
	<div class="box mian1">1</div>
	<div class="box mian2">2</div>
	<div class="box mian3">3</div>
	<div class="box mian4">4</div>
	<div class="box mian5">5</div>
	<div class="box mian6">6</div>
</div>

2.给.mofang设置宽高，并给他设置视距和透视点位置，preserve-3d属性保留子元素3d转换

.mofang{
	width: 100px;
	height: 100px;
	position: absolute;
	top: calc(50% - 50px);
	left: calc(50% - 50px);

	perspective: 3000px;
	perspective-origin:-100% -150%;
	transform-style: preserve-3d;
}

注：视距越小图形越大，反之越小

3.子元素全部绝对定位

.box{
	width: 100px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	font-size: 20px;
	font-weight: bold;
	border: 2px solid black;
	position: absolute;			
}

4.开始调整6个子元素的位置

.mian1{
 	background:  rgba(255, 255, 0, 0.3);
	transform:  translateY(50px) rotateX(90deg);
}

效果图如下：

图1

5.一个面写好之后，将其余的面都调整好

/*后*/
.mian1{
	transform: translateZ(-50px);
}
/*上*/
.mian2{
	transform: translateY(-50px) rotateX(90deg);
}
/*左*/
.mian3{
	transform: translateX(-50px) rotateY(90deg);
}
/*前*/
.mian4{
	transform: translateZ(50px);
}
/*右*/
.mian5{
	transform: translateX(50px) rotateY(90deg);
}
/*下*/
.mian6{
	transform: translateY(50px) rotateX(90deg);
}

效果图如下：

图2

css3D动画可以实现很多效果

下面是我写的一些3D动画效果

demo01

魔方效果

图魔方

html

<div class="wutai">
			
			<div class="mofang">
				
				<div class="box mian1">
					<div class="box1">1</div>
					<div class="box1">2</div>
					<div class="box1">3</div>
					<div class="box1">4</div>
					<div class="box1">5</div>
					<div class="box1">6</div>
					<div class="box1">7</div>
					<div class="box1">8</div>
					<div class="box1">9</div>
				</div>
				
				<div class="box mian2">
					<div class="box2">1</div>
					<div class="box2">2</div>
					<div class="box2">3</div>
					<div class="box2">4</div>
					<div class="box2">5</div>
					<div class="box2">6</div>
					<div class="box2">7</div>
					<div class="box2">8</div>
					<div class="box2">9</div>
				</div>
				
				<div class="box mian3">
					<div class="box3">1</div>
					<div class="box3">2</div>
					<div class="box3">3</div>
					<div class="box3">4</div>
					<div class="box3">5</div>
					<div class="box3">6</div>
					<div class="box3">7</div>
					<div class="box3">8</div>
					<div class="box3">9</div>
				</div>
				
				<div class="box mian4">
					<div class="box4">1</div>
					<div class="box4">2</div>
					<div class="box4">3</div>
					<div class="box4">4</div>
					<div class="box4">5</div>
					<div class="box4">6</div>
					<div class="box4">7</div>
					<div class="box4">8</div>
					<div class="box4">9</div>
				</div>
				
				<div class="box mian5">
					<div class="box5">1</div>
					<div class="box5">2</div>
					<div class="box5">3</div>
					<div class="box5">4</div>
					<div class="box5">5</div>
					<div class="box5">6</div>
					<div class="box5">7</div>
					<div class="box5">8</div>
					<div class="box5">9</div>
				</div>
				
				<div class="box mian6">
					<div class="box6">1</div>
					<div class="box6">2</div>
					<div class="box6">3</div>
					<div class="box6">4</div>
					<div class="box6">5</div>
					<div class="box6">6</div>
					<div class="box6">7</div>
					<div class="box6">8</div>
					<div class="box6">9</div>
				</div>
				
				
			</div>

css

<style type="text/css">
			html,body{
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
			}
			.wutai{
				width: 100%;
				height: 100%;
				border: 1px solid black;
				/* background: black; */
				margin: 0 auto;
			}
			.mofang{
				width: 100px;
				height: 100px;
				
				/* perspective: 2500px;
				perspective-origin:-500% -550%; */
				
				transform-style: preserve-3d;
				animation: texiao 10s linear infinite alternate;
			}
			
			.box{
				width: 90px;
				height: 90px;
				margin: 100px;
				text-align: center;
				line-height: 30px;
				display: grid;
				grid-template-columns: 30px 30px 30px;
				grid-template-rows:30px 30px 30px;
				
				position: absolute;
				
			}
			.box .box1{
				border: 1px solid white;
				background: #AACCEE;
			}
			.box .box2{
				border: 1px solid white;
				background: #FF9966;
			}
			.box .box3{
				border: 1px solid white;
				background: #00FFFF;
			}
			.box .box4{
				border: 1px solid white;
				background: #FF0000;
			}
			.box .box5{
				border: 1px solid white;
				background: #FFFF00;
			}
			.box .box6{
				border: 1px solid white;
				background: blueviolet;
			}
			
			/* 后*/
			.mian1{
				transform: translateZ(-45px);
			}
			/* 左*/
			.mian2{
				transform: translateX(-45px) rotateY(90deg);
			}
			/* 上*/
			.mian3{
				transform: translateY(-45px) rotateX(90deg);
			}
			/* 右*/
			.mian4{
				transform: translateX(45px) rotateY(90deg);
			}
			/* 下*/
			.mian5{
				transform: translateY(45px) rotateX(90deg);
			}
			/* 前*/
			.mian6{
				transform: translateZ(45px);
			}
			
			
			@keyframes texiao{
				0%{transform: translate(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
				50%{transform: translate(400px) rotateX(0deg) rotateY(360deg) rotateZ(90deg);}
				100%{transform: translate(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
			}
		</style>

demo02

多重立体图

在这里插入图片描述

html

<div class="wutai">
			<div class="mofang">
				<div class="box mian1">1</div>
				<div class="box mian2">2</div>
				<div class="box mian3">3</div>
				<div class="box mian4">4</div>
				<div class="box mian5">5</div>
				<div class="box mian6">6</div>
				
				<div class="xiaomofang">
					<div class="box1 mian7">7</div>
					<div class="box1 mian8">8</div>
					<div class="box1 mian9">9</div>
					<div class="box1 mian10">10</div>
					<div class="box1 mian11">11</div>
					<div class="box1 mian12">12</div>
				</div>
			</div>
		</div>

css

<style type="text/css">
			.wutai{
				width: 700px;
				height: 500px;
				border: 1px solid black;
				background: black;
				margin: 0 auto;
				
				/*******/
				perspective: 3000px;
				perspective-origin:-100% -150%;
				/******/
			}
			.mofang{
				width: 100px;
				height: 100px;
				position: absolute;
				top: calc(50% - 50px);
				left: calc(50% - 50px);
				
				/******/
				perspective: 3000px;
				perspective-origin:-100% -150%;
				
				transition: all 500s linear;
				transform-style: preserve-3d;
				/******/
			}
			.box{
				width: 100px;
				height: 100px;
				text-align: center;
				line-height: 100px;
				/* color: white; */
				font-size: 20px;
				font-weight: bold;
				background: rgba(0,0,0,0.5);
				border: 2px solid black;
				position: absolute;
				
				/******/
				transition: all 10s linear;
				/******/
			}
			
		
			.mian1{
				transform: translateZ(-50px);
			}
			
			.mian2{
				transform: translateY(-50px) rotateX(90deg);
			}
		
			.mian3{
				transform: translateX(-50px) rotateY(90deg);
			}
		
			.mian4{
				transform: translateZ(50px);
			}
		
			.mian5{
				transform: translateX(50px) rotateY(90deg);
			}
		
			.mian6{
				transform: translateY(50px) rotateX(90deg);
			}
			
			.xiaomofang{
				width: 50px;
				height: 50px;
				position: absolute;
				top: calc(50% - 25px);
				left: calc(50% - 25px);
				
				perspective: 3000px;
				perspective-origin:-100% -150%;
				
				/******/
				transform-style: preserve-3d;
				transition: all 100s linear;
				/******/
			}
			
			.box1{
				width: 50px;
				height: 50px;
				text-align: center;
				line-height: 50px;
				font-size: 20px;
				font-weight: bold;
				background: rgba(255,255,255,0.2);
				border: 2px solid black;
				
				transform-style: preserve-3d;
				
				position: absolute;
			}
		
			.xiaomofang .mian7{
				transform: translateZ(-27px);
			}
			
			.xiaomofang .mian8{
				transform: translateY(-27px) rotateX(90deg);
			}
		
			.xiaomofang .mian9{
				transform: translateX(-27px) rotateY(90deg);
			}
			
			.xiaomofang .mian10{
				transform: translateZ(27px);
			}
			
			.xiaomofang .mian11{
				transform: translateY(27px) rotateX(90deg);
			}
			
			.xiaomofang .mian12{
				transform: translateX(27px) rotateY(90deg);
			}
			
			
			.mofang:hover .mian1{
				transform: translateZ(-170px);
				background: #00FFFF;
				opacity: 0.7;
				color: white;
			}
			.mofang:hover .mian2{
				transform: translateY(-170px) rotateX(90deg);
				background: #AACCEE;
				opacity: 0.7;
				color: white;
			}
			.mofang:hover .mian3{
				transform: translateX(-170px) rotateY(90deg);
				background: #DCDCDC;
				opacity: 0.7;
				color: white;
			}
			.mofang:hover .mian4{
				transform: translateZ(170px);
				background: #FF0000;
				opacity: 0.7;
				color: white;
			}
			.mofang:hover .mian5{
				transform: translateX(170px) rotateY(90deg);
				background: #FFD700;
				opacity: 0.7;
				color: white;
			}
			.mofang:hover .mian6{
				transform: translateY(170px) rotateX(90deg);
				background: #FF00FF;
				opacity: 0.7;
				color: white;
			}
			
			.mofang:hover{
				transform: rotateX(36000deg);
			}
			
			.mofang:hover .xiaomofang{
				transform: rotateX(9000deg) rotateY(18000deg) rotateZ(36000deg);
			}		
		</style>

demo03

圆柱效果

在这里插入图片描述

html


<div class="wutai">
		
			<div class="yuanzhu">
				<div class="box mian1">1</div>
				<div class="box mian2">2</div>
				<div class="box mian3">3</div>
				<div class="box mian4">4</div>
				<div class="box mian5">5</div>
				<div class="box mian6">6</div>
				<div class="box mian7">7</div>
				<div class="box mian8">8</div>
				<div class="box mian9">9</div>
				<div class="box mian10">10</div>
				<div class="box mian11">11</div>
				<div class="box mian12">12</div>
			</div>
		</div>

css

<style>
		    .wutai{
		        width: 900px;
		        height: 600px;
		        border: 1px solid;
		        margin: 0px auto;
		
		        perspective: 1000px;
		        perspective-origin: 50% 1%;
		    }
			
		    .wutai .yuanzhu{
		        width: 100px;
		        height: 300px;
		        margin: 0 auto;
		        position: relative;
		        top: 150px;
		        border: 0px solid red;
		
		        transform-style: preserve-3d;
		    }
		
		    .yuanzhu:hover{
		        transform: rotateY(36000000deg);
		        transition: all 1000000s linear;
			   
		    }
		
		    .wutai .yuanzhu .box{
		        width: 100px;
		        height:300px;
		        text-align: center;
		        line-height: 300px;
		        font-size: 40px;
		        color: white;
		        position: absolute;
		    }
		
		    .mian1{
		        background: red;
		        transform: rotateY(30deg) translateZ(200px) ;
		    }
		    .mian2{
		        background: orange;
		        transform: rotateY(60deg) translateZ(200px);
		    }
		    .mian3{
		        background: yellow;
		        transform: rotateY(90deg) translateZ(200px);
		    }
		    .mian4{
		        background: green;
		        transform: rotateY(120deg) translateZ(200px);
		    }
		    .mian5{
		        background: cyan;
		        transform: rotateY(150deg) translateZ(200px);
		    }
		    .mian6{
		        background: blue;
		        transform: rotateY(180deg) translateZ(200px);
		    }
		    .mian7{
		        background: purple;
		        transform: rotateY(210deg) translateZ(200px);
		    }
		    .mian8{
		        background: blue;
		        transform: rotateY(240deg) translateZ(200px);
		    }
		    .mian9{
		        background: cyan;
		        transform: rotateY(270deg) translateZ(200px);
		    }
		    .mian10{
		        background: green;
		        transform: rotateY(300deg) translateZ(200px);
		    }
		    .mian11{
		        background: yellow;
		        transform: rotateY(330deg) translateZ(200px);
		    }
		    .mian12{
		        background: orange;
		        transform: rotateY(360deg) translateZ(200px);
		    }
		
		</style>

demo04

齿轮效果
在这里插入图片描述

html

<div class="wutai">
			
			<div class="chilun one">
				<div class="box"></div>
				<div class="box"></div>
				<div class="box"></div>
			</div>
			
			<div class="chilun two">
				<div class="box"></div>
				<div class="box"></div>
				<div class="box"></div>
			</div>
			
			<div class="chilun3 three">
				<div class="box1"></div>
				<div class="box1"></div>
				<div class="box1"></div>
				<div class="box1"></div>
				<div class="box1"></div>
				<div class="box1"></div>
			</div>
			
		</div>

css

<style type="text/css">
			html,body,div{
				margin: 0;
				padding: 0;
			}
			.wutai{
				width: 700px;
				height: 500px;
				border: 1px solid black;
				margin: 0 auto;
				position: relative;
			}
			
			.chilun{
				width: 60px;
				height: 60px;
				background: black;
				border-radius: 50%;
				position: absolute;
			}
			
			.chilun3{
				width: 120px;
				height: 120px;
				background: black;
				border-radius: 50%;
				position: absolute;
			}
			
			.one{
				top: 47px;
				left: 53px;
				animation: xuanzhuan 1.5s linear infinite;
			}
			.two{
				top:97px;
				left: 104px;
				animation: xuanzhuan2 1.5s linear infinite;
			}
			.three{
				top: 102px;
				left: 173px;
				animation: xuanzhuan3 3s linear infinite;
			}
			@keyframes xuanzhuan{
				0%{transform: rotate(0deg);}
				100%{transform: rotateZ(360deg);}
			}
			@keyframes xuanzhuan2{
				0%{transform: rotate(0deg);}
				100%{transform: rotateZ(-360deg);}
			}
			@keyframes xuanzhuan3{
				0%{transform: rotate(0deg);}
				100%{transform: rotateZ(360deg);}
			}
			
			.box{
				width: 16px;
				height: 80px;
				background: black;
				position: absolute;
				left: calc(50% - 8px);
				top: calc(50% - 40px);
			}
			.box:nth-child(2){
				transform: rotateZ(60deg);
			}
			.box:nth-child(3){
				transform: rotateZ(120deg);
			}
			.box1{
				width: 16px;
				height: 140px;
				background: black;
				position: absolute;
				left: calc(50% - 8px);
				top: calc(50% - 70px);
			}
			.box1:nth-child(2){
				transform: rotateZ(30deg);
			}
			.box1:nth-child(3){
				transform: rotateZ(60deg);
			}
			.box1:nth-child(4){
				transform: rotateZ(90deg);
			}
			.box1:nth-child(5){
				transform: rotateZ(120deg);
			}
			.box1:nth-child(6){
				transform: rotateZ(150deg);
			}
		</style>

如果文中有不妥或者错误的地方还望高手的您指出，以免误人子弟。

如果您有更好的建议，不如留言一起讨论，共同进步！ 再次感谢您耐心的读完本篇文章。

vx:bsl521921

咳咳呀
关注
CSS3实现3D动画
weixin_34033624的博客
06-13 612
本篇文章给大家带来的内容是关于css实现3d动画特效的代码实例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助！ 一、动画属性 1.transform-style: flat | preserve-3d 动画的形式 flat：默认值平面，也就是没有3d效果 preserve-3d：3d效果展示 如果要用3D表现，这个属性是必须启用的，当然注意属性要加各种前缀。 （这个属性可以...
CSS笔记——触发式动画Transition、主动式动画Animation、Transfrom 动画、CSS 3D 动画、阴影和滤镜样式
最新发布
bqiuer的博客
09-25 1731
在这个例子中，定义了一个名为 move 的动画，它包含两个关键帧，分别在 0% 和 100% 处，分别定义了 .box 元素的 left 属性的值。第一个参数表示阴影的水平偏移量，第二个参数表示阴影的垂直偏移量，第三个参数表示阴影的模糊半径，第四个参数表示阴影的颜色。用于调整元素的饱和度。属性是 CSS3 中的一个强大属性，它可以为元素添加各种视觉效果，如模糊、颜色调整、亮度、对比度、饱和度等。属性可以为元素添加阴影效果，同时还可以通过调整各个参数的值，实现不同的阴影效果，例如内阴影、多重阴影等。
css 3D动画
m0_70877859的博客
08-17 501
什么是3d的场景呢？2d场景，在屏幕上水平和垂直交叉线x轴和y轴3d场景，在垂直于排名的方向，相对于3d多出个z轴Z轴靠近屏幕方向是正值，远离屏幕的方向是反向css3中的3d变换主要包含以下几种功能函数：3d位移：css3中3d位移主要包含tanslateZ()和translate3d()两个函数；...
css-3D动画
Black_Straight的博客
06-01 660
css-3D动画
CSS 3D动画翻书效果
12-16
随着技术的发展，CSS 3引入了许多高级特性，其中之一就是3D转换，它使得创建复杂的3D动画效果成为可能，如我们这里讨论的“CSS 3D动画翻书效果”。 CSS 3D转换通过`transform`属性实现，允许元素在3D空间中进行旋转...
css3d动画：平移、旋转、缩放
YY的博客
10-05 5689
transform：translate3d（）、transform：rotate3d（）、
纯CSS3实现的3D小球动画在线演示
06-12
【标题】：“纯CSS3实现的3D小球动画在线演示” 在网页设计与开发领域，CSS3（层叠样式表第三版）的引入为设计师和开发者提供了丰富的样式和动画功能，大大增强了网页的视觉效果。本项目标题“纯CSS3实现的3D小球...
CSS3 3D动画菜单.rar_CSS3 3D动画菜单
09-24
一款3D效果的纯CSS3动画菜单，这款CSS3菜单拥有4种不同的颜色风格，当然你也可以自己定义一些CSS样式来实现更多的颜色主题。这款菜单的最大特点是鼠标滑过菜单项时，菜单项的文字将会出现倾斜的动画特效。
纯css（css3）实现的3D场景布局（有动画）
05-13
效果是我在网上看到的，但我用纯css实现了一遍，3D场景布局，中间有一个3D的柱状图，镜头会围绕柱状图来回旋转，水平线下还会有倒影。
js+css3实现五种3D动画
09-08
js+css3实现五种3D图片切换效果，可实现立体、翻转、翻页的效果， 代码可直接使用、
css3 3D邮寄信封打开动画特效
09-13
css3 3D邮寄信封打开动画特效
CSS3D动画
weixin_46421045的博客
03-14 89
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin: 0;padding: 0;} .box{ width: 600px; height: 500px; ...
css3 3d动画
weixin_52767262的博客
10-29 605
在学习3d动画之前，我们要先了解一个概念，就是我们在网页上的所展示的内容，他是一个2d的平面，要想在2d空间内展示出3d的效果，仅凭x轴和y轴是无法做到的，因此我们需要在添加一个轴的方向，z轴，这条轴你可以看作是屏幕正对着我们的视线。一下还做了两个案例，一个是旋转木马，另一个是正方体盒面，你们可以先动手自己去做一下，尝试以自己的思想去把他给做出来，然后再对比我的，你可以把你的想法发出来，我们一起努力进步哦，前端道路深远且到长，让我们共同求进退。/* 隐藏背面旋转元素不可见 */
css实现3D动画
qq_43494108的博客
07-28 3155
使用css3实现3d旋转动画 今天给大家带来的是使用css3实现旋转动画首先我们来看代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> &...
css中的3D动画属性
qindayong
05-20 593
css中的3D动画属性 1、动画是CSS3 中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或 一组动画，常用来实现复杂的动画效果。 2、在HTML中的图像以3D的样式呈现需要设置transform-style transform-style: flat; /* 所有子元素在 2D 平面呈现*/ transform-style: preserve-3d; /* 保留 3D...
css实现3D动画效果
SSSY1122的博客
05-06 842
首先css3中能实现动画的功能的主要有transition(一个属性值平滑的过渡到另一个属性值)和animation(通过关键帧的技术在网页上产生更加复杂的效果)两种属性。 在想产生动画效果的元素内添加相应的样式，这个样式的格式如下： transition: 过渡的模式就有以下这么几种：   ease  缓慢开始，缓慢结束，中间速度会快些。(如果不定义过渡的模式这个就是默认
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值