css3实现盒子旋转打开的3d动画

最新推荐文章于 2023-03-15 16:17:00 发布
最新推荐文章于 2023-03-15 16:17:00 发布
阅读量2k 收藏 15
点赞数 5
分类专栏： css 文章标签： 3d animation css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36818627/article/details/84672214
版权

先来记忆一下动画相关的知识

            animation 动画 帧数 1秒 60副画面
                    animation-name 动画名称 见名知意
                    animation-duration 动画时间 
                    animation-delay 动画延迟时间

                    animation-timing-function 动画速率变化
                        ease 慢快慢
                        ease-in 慢入
                        ease-out 慢出
                        ease-in-out 慢入慢出
                        linear 匀速的
                        cubic-bezier(.36,1.54,.67,1.47)

                    
                    animation-iteration-count  动画次数
                        number 123455
                        infinite 无限次
                    
                    animation-direction 动画的方向
                        normal 
                        alternate 先正向 再反向 需要两次 运动
                        reverse 反向 
                        alternate-reverse 先反向 再正向
                    

                    animation-fill-mode 决定动画起始结束状态 
                        none 原始状态 => 动画开始 => 原始状态
                        forwards 原始状态 => 动画开始 => 动画帧的100%
                        backwards 动画帧0%开始 =>动画开始 => 原始状态处
                        both 动画帧0%开始 =>动画开始 => 动画帧的100%
                        
                    animation-play-state  决定动画运行与暂停
                        running运行
                        paused 暂停

                    @keyframes run{
                        from{width:50px;}
                        to{width:800px;}
                    }

效果图3d动画

代码如下

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="ydj">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>3d动画</title>
		<style type="text/css">
			*{margin:0;padding:0;}
			ul,ol{list-style:none;}
			a{text-decoration:none;}
			img{border:0;}
			/*
				stage 是舞台 
				face 全部是演员 

				集合 

				分配位置 先旋转 面向 正确的方向 
				translateZ(100px) 取决于 该元素 面向的方面
				
				transform-style:preserve-3d; 让子元素 能在3d空间 占据位置

				body perspective:800px; 视野到屏幕的距离

				perspective-origin:left top; 看的方位
			*/
			body{
				perspective:800px;
			}
			.stage{
				position:relative;
				width:200px;
				height:200px;
				margin: 200px auto;
				box-shadow:0 0 15px #000 inset;
				transform-style:preserve-3d;
				transition:2s;
				/* transform:rotateX(0deg) */;
				animation:play 2s infinite alternate;
			}
			.face{
				position:absolute;
				width:200px;
				height:200px;
				background:url("img/1.png") no-repeat center;
				font-size: 50px;
				line-height: 200px;
				text-align: center;
				color:#fff;
				box-shadow:0 0 15px #f00 inset;
				transition:2s;
			}
			.front{
				transform:translateZ(100px);
				animation:play1 2s infinite alternate;
			}
			.rear{
				background-image: url("img/2.png");
				transform:rotateY(180deg) translateZ(100px);
				animation:play2 2s infinite alternate;
			}
			.left{
				background-image: url("img/3.png");
				transform:rotateY(-90deg) translateZ(100px);
				animation:play3 2s infinite alternate;
			}
			.right{
				background-image: url("img/4.png");
				transform:rotateY(90deg) translateZ(100px);
				animation:play4 2s infinite alternate;
			}
			.up{
				background-image: url("img/5.png");
				transform:rotateX(90deg) translateZ(100px);
				animation:play5 2s infinite alternate;
			}
			.down{
				background-image: url("img/6.png");
				transform:rotateX(-90deg) translateZ(100px);
				animation:play6 2s infinite alternate;
			}
			/*
			.stage:hover{
				transform:rotateX(180deg) rotateY(180deg);
			
			}
			
		 	.stage:hover .front{
				transform:translateZ(200px);
			}
			.stage:hover .rear{
				transform:rotateY(180deg) translateZ(200px);
			}
			.stage:hover .left{
				transform:rotateY(-90deg) translateZ(200px);
			}
			.stage:hover .right{
				transform:rotateY(90deg) translateZ(200px);
			}
			.stage:hover .up{
				transform:rotateX(90deg) translateZ(200px);
			}
			.stage:hover .down{
				transform:rotateX(-90deg) translateZ(200px);
			} */
			@keyframes play{
				0%{
					transform:rotateX(0deg) rotateY(0deg);
					
					
					.down{
						transform:rotateX(-90deg) translateZ(100px);
					} 
				}
				100%{
					transform:rotateX(180deg) rotateY(180deg);
					
					
					.down{
						transform:rotateX(-90deg) translateZ(200px);
					} 
				}
			}
			@keyframes play1{
				0%{
					
					
						transform:translateZ(100px);
					
					
				}
				100%{
					
						transform:translateZ(200px);
					
				}
			}
			@keyframes play2{
				0%{
					
					
						transform:rotateY(180deg) translateZ(100px);
					
					
				}
				100%{
					
						transform:rotateY(180deg) translateZ(200px);
					
				}
			}
			@keyframes play3{
				0%{
					
					
						transform:rotateY(-90deg) translateZ(100px);
					
					
				}
				100%{
					
						transform:rotateY(-90deg) translateZ(200px);
					
				}
			}
			@keyframes play4{
				0%{
					
					
						transform:rotateY(90deg) translateZ(100px);
					
					
				}
				100%{
					
						transform:rotateY(90deg) translateZ(200px);
					
				}
			}
			@keyframes play5{
				0%{
					
					
						transform:rotateX(90deg) translateZ(100px);
					
					
				}
				100%{
					
						transform:rotateX(90deg) translateZ(200px);
					
				}
			}
			@keyframes play6{
				0%{
					
					
						transform:rotateX(-90deg) translateZ(100px);
					
					
				}
				100%{
					
						transform:rotateX(-90deg) translateZ(200px);
					
				}
			}

		</style>
	</head>
	<body>
		<div class="stage">
			<div class="face front">前</div>
			<div class="face rear">后</div>
			<div class="face left">左</div>
			<div class="face right">右</div>
			<div class="face up">上</div>
			<div class="face down">下</div>
		</div>
	</body>
</html>

 

敲出真谛
关注
  • 5
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS点击切换或隐藏盒子的卷起、展开效果
前端程序媛_Ying博客
10-07 1412
【代码】点击切换或隐藏盒子的卷起、展开效果。
CSS实现元素翻转效果
qq_44849271的博客
02-04 4689
翻转效果建议IOS系统、安卓系统、window系统都要进行实机测试，免得线上环境出现兼容问题。1、定义一个父元素，父元素中两个子元素，两个子元素分别是背面与正面，2、定义一个父元素，父元素中两个子元素，两个子元素分别是背面与正面，元素翻转的效果能让用户有良好的体验感。CSS实现元素翻转的效果有两种思路。
css设置div 展开收起有过渡动画
weixin_38673922的博客
03-15 1709
【代码】css设置div 展开收起有过渡动画。
CSS实现图像旋转动态效果
沛竹君的博客
04-11 2万+
CSS实现图像旋转动态效果 首先，应向需要设置旋转的div的css样式中添加如下代码： 例如向一个名为img01的类选择器添加旋转样式，在animation属性内设置，旋转动画，rotate为动画名（自定义的名称），6s为周期，linear为线性渐变（取消渐变效果），infinite为无限循环，即每轮动画结束后自动进入下一轮，实现无限旋转效果。 .img01{ display:...
用css3制作旋转加载动画的几种方法
04-11 389
以WebKit为核心的浏览器，例如Safari和Chrome，对html5有着很好的支持，在移动平台中这两个浏览器对应的就是IOS和Android。最近在开发一个移动平台的web app，那么就有机会利用css3去实现一些很酷的效果，这些效果原来更多的是利用图片来实现。最近的一个改进就是利用css3制作旋转加载动画。以下将分别介绍几种实现的方案。 方案1，图片辅助 传统做法是直接用动...
css3d旋转盒子实例
11-07
在实际项目中，你还可以通过JavaScript或者CSS动画库（如`animaiton-3d`文件可能包含的内容）来动态改变旋转参数，使盒子按照特定的时间序列和速度进行旋转，增强用户体验。 总结一下，这个"css3d旋转盒子"实例展示...
纯CSS3实现的3D小盒子动画 可自定义旋转角度
08-23
为了能更好的演示HTML5的3D特性，我们往往会利用简单的小盒子来做3D实验，今天分享的这款HTML5动画就展现了3D小盒子动画，我们可以通过滑动鼠标来翻转小盒子预览...这款3D小盒子动画是利用纯CSS3实现的，效果很不错。
jQuery自定义图片3D盒子旋转代码
06-24
3D盒子旋转的核心在于CSS3的转换（transform）和过渡（transition）属性。这些属性允许我们在不进行昂贵的重绘和回流的情况下创建平滑的动画效果。在本项目中，CSS3可能被用来定义3D变换矩阵，使图片在空间中旋转，...
jQuery+CSS3实现可3D旋转的盒子动画效果源码.zip
11-17
在本资源中，"jQuery+CSS3实现可3D旋转的盒子动画效果源码.zip" 是一个包含使用jQuery和CSS3技术创建3D旋转盒子动画的示例代码。这个项目可能是一个网页设计或前端开发的学习资源，用于演示如何通过这两种强大的技术...
html圆环旋转效果,css3 div实现三维立体圆环旋转效果
weixin_34556619的博客
06-03 1108
圆环最好设计为扫描特效，转起来会很有感觉1、首先创建一个div 2、css样式.companydiV{position: absolute;top: -130px;/* left: 80px; */transform: skewY(0) rotateZ(88deg) rotateX(8deg) rotateY(-79deg);}3、css3动画@keyframes rollI...
css动画-3d旋转盒子
zhang_ntmare的博客
11-07 3229
left:0; right:0; top:0; bottom:0; margin：auto;会使text居中，如果text没有宽高，则会继承父集的宽高。适合body 内的遮罩 3d动画记得设置3d，transform-style: preserve-3d; 重置3d中心，transform-origin:center center;
开宝箱抽奖CSS3动画代码
ICode联盟
11-24 758
下载地址 使用Zepto.js插件实现的开宝箱抽奖，动画效果配合CSS3代码，很不错的特效代码，特效基于Zepto、CSS3，其中有好几种CSS3动画效果，背景光环滚动，宝箱摇摆开启，弹出提示层，还是很不错的CSS3动画特效，大家可以学习下。 dd: ...
CSS3提高： CSS3 3D转换
薛定谔的猫
11-06 1807
transform:rotate3d(1,0,0,45deg) 就是沿着。transform-style: flat 子元素不开启。模拟人类的视觉位置，可认为安排一只眼睛去看。距离视觉点越近的在电脑平面成像越大，越远成像。元素旋转的方向的判断 我们需要先学习一个左手。产生近大远小视觉立体，但是只是效果二维的。坐标系其实就是指立体空间，立体空间是由。的基础上多加了一个可以移动的方向，就是。轴越大（正值） 我们看到的物体就越。其余手指的弯曲方向就是该元素沿着x。其余手指的弯曲方向就是该元素沿着。
3d动画盒子旋转
Myworldlet的博客
09-21 597
Title             * {             margin: 0;             padding: 0;         }         li {             list-style: none;         }         ul {             width: 300px;          
HTML实现简单的动画效果(盒子过渡，扑克旋转)
热门推荐
冷色调的夏天的博客
08-22 2万+
HTML实现简单的动画效果(盒子过渡，扑克旋转) // 实现一个简单的鼠标点击div触发过渡效果 <!doctype html> <html> <head> <meta charset="utf-8"> <title>过渡效果</title> <style> *{ margin:0px; padding:0px;}...
html5css3动画小小demo旋转的盒子
GS2016的博客
02-01 1669
旋转的盒子 img{ animation:go 2s linear infinite; display:block; margin:100px auto; } @keyframes go{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg
那些年我们用css3实现的打开盒子的3d动画
车联网开发的博客
12-01 2238
本片博客意在练习使用css3的新增特性实现一些炫酷的特效 特效如图 代码如下 &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="Generator" content="EditPlus®"
css设置盒子动画,CSS3 transition动画 animation动画
weixin_33895554的博客
08-03 1089
CSS3 transition动画transition-property 设置过渡的属性，比如：width height background-colortransition-duration 设置过渡的时间，比如：1s 500mstransition-timing-function 设置过渡的运动方式linear 匀速ease 开始和结束慢速ease-in 开始是慢速ease-out 结束时慢速...
css设置盒子动画,CSS3 盒子打开动画
weixin_28866303的博客
08-03 1211
CSS语言：CSSSCSS确定html, body {height: 100%; }body {overflow: hidden;margin: 0;perspective: 50em; }body:after {box-sizing: border-box;position: absolute;top: 50%;left: 50%;margin: -10em;width: 20em;height...
css实现3个盒子3d旋转动画
最新发布
12-16
以下是CSS实现3个盒子3D旋转动画的代码和步骤： ```html <div class="box"></div> <div class="box"></div> <div class="box"></div> ``` ```css .container { perspective: 1000px; /* 视距，决定了3D效果...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值