css制作3D立体旋转效果

最新推荐文章于 2022-05-29 13:58:31 发布
最新推荐文章于 2022-05-29 13:58:31 发布
阅读量1.8k 收藏 4
点赞数 2
分类专栏： # CSS 文章标签： css 3D旋转 css实现3D 旋转名片
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zag666/article/details/100051386
版权

通过纯css制作出3D旋转效果，以展示中国部分知名公司为例：

浏览器实现结果：

6个名片都具有两面，一面图片，一面文字，当鼠标放在图片上时，就会3D旋转成文字的一面。
在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>3D变形制作视频展示区</title>
	<style>
		body{
			margin-top: 5em;
			text-align: center;
			color: 414142;
			background: rgb(246,241,232);
			background-image: -ms-radial-gradient(farthest-side ellipse at center,  rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%),url("http://fs0.139js.com/file/s_jpg_857b081bjw1du3kveu19sj.jpg");
			background-image: -webkit-radial-gradient(farthest-side ellipse at center,  rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%), url("http://fs0.139js.com/file/s_jpg_857b081bjw1du3kveu19sj.jpg");
			background-image: radial-gradient( farthest-side ellipse at center,  rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%), url("http://fs0.139js.com/file/s_jpg_857b081bjw1du3kveu19sj.jpg");
		  background-size: cover;
		}
		h1,em,#information{
			display: block;
			font-size: 25px;
			font-weight: normal;
			margin: 2em auto;
		}
		a{
			color: #414142;
			font-style: normal;
			text-decoration: none;
			font-size: 20px;
		}
		a:hover{
			text-decoration: underline;
		}
		#container{
			margin: 0 auto;
			width: 1024px;
		}
		.wrapper{
			display: inline-block;
			width: 310px;
			height: 100px;
			vertical-align: top;
			margin: 1em 1.5em 2em 0;
			cursor: pointer;
			position: relative;
			font-family: Tahoma,Arial;
			-webkit-perspective: 4000px;
			-moz-perspective: 4000px;
			-ms-perspective: 4000px;
			-o-perspective: 4000px;
			perspective: 4000px;
		}
		.item{
			height: 100px;
			height: 100px;
			-webkit-transform-style: preserve-3d;
			-moz-transform-style: preserve-3d;
			-ms-transform-style: preserve-3d;
			-o-transform-style: preserve-3d;
			transform-style: preserve-3d;
			-webkit-transition: -webkit-transform .6s;
			-moz-transition: -moz-transform .6s;
			-ms-transition: -ms-transform .6s;
			-o-transition: -o-transform .6s;
			transition: transform .6s;
		}
		.item:hover{
			-webkit-transform: translateZ(-50px) rotateX(95deg);
			 -moz-transform: translateZ(-50px) rotateX(95deg);
			 -ms-transform: translateZ(-50px) rotateX(95deg);
			 -o-transform: translateZ(-50px) rotateX(95deg);
			 transform: translateZ(-50px) rotateX(95deg);
		}
		.item img {
			   display: block;
			   position: absolute;
			   top: 0;
			   border-radius: 3px;
			   box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
			   -webkit-transform: translateZ(50px);
			   -moz-transform: translateZ(50px);
			   -ms-transform: translateZ(50px);
			   -o-transform: translateZ(50px);
			   transform: translateZ(50px);
			   -webkit-transition: all .6s;
			   -moz-transition: all .6s;
			   -ms-transition: all .6s;
			   -o-transition: all .6s;
			   transition: all .6s;
			   width: 310px; 
			   height: 100px;
 		}
 		 .item .information {
			   display: block;
			   position: absolute;
			   top: 0;
			   height: 80px;
			   width: 290px;
			   text-align: left;
			   border-radius: 15px;
			   padding: 10px;
			   font-size: 12px;
			   text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
			   box-shadow: none;
			   background: rgb(236,241,244);
			   background: -webkit-linear-gradient(to bottom,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
			    background: -ms-linear-gradient(to bottom,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
			    background: linear-gradient(to bottom,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);

			    -webkit-transform: rotateX(-90deg) translateZ(50px);
			    -moz-transform: rotateX(-90deg) translateZ(50px);
			    -ms-transform: rotateX(-90deg) translateZ(50px);
			    -o-transform: rotateX(-90deg) translateZ(50px);
			    transform: rotateX(-90deg) translateZ(50px);
			    -webkit-transition: all .6s;
			    -moz-transition: all .6s;
			    -ms-transition: all .6s;
			    -o-transition: all .6s;
			    transition: all .6s;
 			}
 			 .information strong {
			   display: block;
			   margin: .2em 0 .5em 0;
			   font-size: 20px;
			   font-family: "Oleo Script";
			  }
			.item:hover img {
			  box-shadow: none;
			  border-radius: 15px;
			}
			      
			.item:hover .information {
			  box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
			  border-radius: 3px;
			 }
	</style>
</head>
<body>
	<div id="container">
			<h1>3D变形制作知名公司展示区</h1>
			<div class="wrapper">
				<div class="item">
					<img src="http://p3.qhimg.com/t0113f4c931a6e56e29.jpg">
					<span class="information">
						<strong>昌元化工</strong>昌元化工公司，是全世界最大的高锰酸钾生产商，年产量约4万吨，占据国内90%和国际55%的市场份额。
					</span>
					</img>
				</div>
			</div>
			<div class="wrapper">
				<div class="item">
					<img src="http://p6.qhimg.com/t01193915845ce36a2f.jpg">
					<span class="information">
						<strong>巨石集团</strong>2016年中国玻璃纤维产量是362万吨，占了全球的50%--60%的份额，巨石集团占了中国三分之一，。
					</span>
					</img>
				</div>
			</div>
			<div class="wrapper">
				<div class="item">
					<img src="http://p5.qhimg.com/t01b6a5b2e45dda6745.jpg">
					<span class="information">
						<strong>大疆创新</strong>作为全球最大的消费级无人机厂商，大疆创新在2011年至2015年，销售额增长近100倍。大疆80%的销量来自于海外。
					</span>
					</img>
				</div>
			</div>
			<div class="wrapper">
				<div class="item">
					<img src="http://p3.qhimg.com/t0100c15ad1811f98c7.jpg">
					<span class="information">
						<strong>中国华为</strong>2016年华为的销售收入达到了5200亿人民币，同比增长32%，其中6成来自海外业务达到3200亿！
					</span>
					</img>
				</div>
			</div>
			<div class="wrapper">
				<div class="item">
					<img src="http://p8.qhimg.com/t01db6e588779c1f3a4.jpg">
					<span class="information">
						<strong>国家电网</strong>年营收超过2万亿元人民币，位居世界所有公司第二位，净利润高达102亿美元，更掌握着智能电网，特高压电网技术的国际标准制定权。
					</span>
					</img>
				</div>
			</div>
			<div class="wrapper">
				<div class="item">
					<img src="https://p1.ssl.qhimg.com/dr/270_500_/t01059dbb78b5e2eada.jpg?size=550x351" >
					<span class="information">
						<strong>阿里巴巴</strong>阿里巴巴网络技术有限公司是以曾担任英语教师的马云为首的18人于1999年在浙江杭州创立。
					</span>
					</img>
				</div>
			</div>
		</div>	
</body>
</html>
若年封尘
关注
专栏目录
css3 3d旋转风车效果
u012350560的博客
08-19 405
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <t...
CSS3 3D 转换
最新发布
lly202406的博客
08-24 1097
CSS3 3D 转换是一种强大的技术，它允许开发者创建出令人印象深刻的3D视觉效果，而无需复杂的JavaScript或第三方库。通过使用CSS3的3D转换功能，设计师可以轻松地将元素旋转、倾斜、移动或缩放，以创建出深度和透视感。在本文中，我们将探讨CSS3 3D转换的基础知识，包括如何使用它们以及一些实际的应用示例。
CSS 3D旋转效果
qq_53322582的博客
03-01 1792
俗称3D变换，指基于3D立体的角度来设置盒子。比如将盒子设置为立方体。3D的效果跟2D是一样的，有平移和旋转，不同点在于，2D只有x轴和y轴，3D会多一个z轴，用于表示立体。 3D的效果通过需要远距离观察才能看出立体效果，因为距离太近，我们只能看出平面的2D效果，这就需要在设置3D变换效果之前，需要先设置景深（一般来说景深设置在900px-1200px之间就可以）： perspective: 1200px; /* 在父元素中使用,设置景深 */ 我们还需要设置从屏幕的哪个点来观察屏幕内部的3d效果：
CSS3中的3D旋转特效
weixin_44592738的博客
11-26 1428
CSS3中的3D旋转特效
css3 3D旋转效果
qq_24581629的博客
04-10 789
主要是运用到了两个 CSS 属性： transform-style perspective transform-style语法:transform-style: flat|preserve-3d; transform-style: flat; // 默认，子元素将不保留其 3D 位置 transform-style: preserve-3d; // 子元素将保留其 3D 位置。persp
css-3d旋转（三维立体效果）
qq_39111074的博客
01-24 2186
将平面形状 进行 3d 旋转，营造 三维立体空间视觉效果 例如：四边形 进行 3d 旋转- - - 四边形宽高- - - width:200px; height:100px; 原图： 进行3d旋转- - - transform:rotateX(-60deg) rotateY(0deg) rotateZ(-22deg); 后： 其他 三维效果 可以调节 X, Y, Z 轴旋转角度，查看具体效果得到想要的形状 ps:一般写了transform ，还会再写个 -webkit-transform（和trans
旋转的正方体css3制作3D立体效果
09-08
本教程将深入探讨如何利用CSS3创建一个旋转的正方体，展示出3D立体效果，从而提升用户体验。 首先，我们需要理解CSS3中的3D变换基础。CSS3的`transform`属性允许我们对元素进行2D和3D的变换，如旋转、缩放、平移等...
Html5+CSS3实现3D旋转效果
04-16
在本主题中，我们将深入探讨如何使用HTML5和CSS3的特性来实现3D旋转效果，这是一种强大的视觉表现手法，可以为网页增添动态和立体感。 首先，HTML5提供了`<canvas>`元素，用于在浏览器中进行图形绘制。然而，在实现...
纯CSS3制作3D旋转线条球体动画特效特效代码
03-20
【标题】"纯CSS3制作3D旋转线条球体动画特效特效代码"涉及的主要知识点是CSS3中的3D变换和动画效果。CSS3是层叠样式表的第三版，为网页设计提供了更多丰富的视觉表现力，包括3D转换、动画等特性。 1. **CSS3 3D ...
css3超酷3D旋转导航菜单特效
12-13
其次，导航菜单的3D立方体旋转效果是通过组合多个CSS3选择器和伪类实现的。例如，`:hover`伪类用于检测鼠标悬停事件，当鼠标悬停在某个菜单项上时，应用相应的3D旋转样式。此外，可能还使用了`transition`属性来平滑...
CSS3制作3D骰子旋转动画特效
06-24
在本教程中，我们将深入探讨如何使用CSS3创建一个3D骰子旋转动画特效，这是一种交互式的视觉效果，用户可以通过鼠标移动来控制正方体的旋转。CSS3是层叠样式表的最新版本，它引入了许多强大的新特性，包括3D变换和...
CSS3实现酷炫的3D旋转透视效果
11-21
CSS3实现酷炫的3D旋转透视 3D动画效果现在越来越普及，已经被广泛的应用到了各个平台，比如阿里云，华为云，webpack官网等。它可以更接近于真实的展示我们的产品和介绍，带来极强的视觉冲击感。所以说，为了让自己更加优秀，css3 3D动画必不可少。 你将学到 CSS3 3D 转换的常用API介绍 CSS3 3D 应用场景 CSS3 3D 实现一个立方体   开始 1.CSS3 3D 转换的常用API介绍 首先先上一张css 3D的坐标系：   接下来我们来介绍几个常用的api： 旋转 rotateX() rotateY() rotat
HTML5+CSS3小实例：3D旋转卡片
小王的技术库
05-29 1093
HTML5+CSS3实现3D旋转卡片，开发工具：VS Code。 先看效果： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-82YkNLBC-1653803901135)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2c53c2c237c74057a4190617668f404a~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)] 源代码： <div clas
css3实现3d图片旋转效果
li5466667的博客
04-29 4777
1.实现原理 a.首先所有的图片的容器position:fixed，叠加在一起，然后一次设置rotateY分别为（36*i）deg ，i取0到10 ；所有图片会相交成一个类似花的形状 然后为每个图片的容器设置translateZ，所有图片会从对应的角度向外移动，扩展成一个大圆，即下图效果 b.创建动画，让rotateY每次增加90deg旋转起来即可。同时，为了观察效果，让rotateX依次上下移动20deg。 2.html文件 <!DOCTYPE html> <html lang="en
CSS中的3D旋转
m0_56232007的博客
06-09 7313
一、3D旋转 格式： transform：rotateX（旋转角度） transform：rotateY（旋转角度） transform：rotateZ（旋转角度） transform：rotate3d（1,1,1,deg） 指定对象的3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z取值为0/1 0表示不旋转 1表示旋转 注意： ***第4个参数表示旋转的角度，参数不允许省略*** 注意： 浏览器默认是2d的，如果
css 实现三维立体旋转效果
weixin_38881784的博客
04-28 4894
css实现三维立体旋转效果
使用CSS3实现酷炫的3D旋转视图
zz_jesse的博客
07-06 1882
3D动画效果现在越来越普及，已经被广泛的应用到了各个平台，比如阿里云，华为云，webpack官网等。它可以更接近于真实的展示我们的产品和介绍，带来极强的视觉冲击感。所以说，为了让自己更加优...
css3 3D旋转特效
fisher
10-09 1812
最近自己的网站正在制作，由于是个人网站，所以我傲娇的抛弃了IE，痛快的用起了css3和html5的诸多特效，然而问题亦随之而来。这篇文章的主要讲解在使用css3的3D旋转的时候遇到的文章，错误之处，还望各位看官老爷评论中指出。 3D旋转，难点在与其处在一个三维的空间中，我们需要发挥一下空间想象力在头脑中构建它的结构，同时，它的坐标系是随着所做的3D变化而改变的，所以在进行变换的过程中，不同变换动
css3制作3D立体模型
qq_42158442的博客
10-19 1252
 代码跟注释都在里面了！想知道是什么效果不妨自己试试！ &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; @-webkit-keyframes domove{
CSS3立体旋转幻灯片制作教程
本篇文章主要介绍了如何利用纯CSS技术，即不借助JavaScript，创建一个具有立体旋转效果的幻灯片。文章针对有一定CSS3基础的读者设计，预计阅读时间较长，约45分钟。作者着重讲解了CSS3中的3D变换技术，这是一种用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

若年封尘

你的鼓励将是我创作的最大动力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值