css钻石旋转实现

最新推荐文章于 2021-08-04 02:11:45 发布
最新推荐文章于 2021-08-04 02:11:45 发布
阅读量272 收藏 1
点赞数
原文链接：http://www.cnblogs.com/cxzhijia/p/7497933.html
版权

css钻石旋转实现:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/* 钻石旋转 
			 * 要实现这个钻石旋转: 首先需要明确这个钻石分为上下两个部分,上面包含六个正三角形,下面有6个倒三角形
			 * css实现正三角形：上右下左的方向 border-style: solid;border-color:transparent;border-width: 0 50px 170px 50px; border-bottom-color: rgba(255,0,0,0.5)
			 * css实现倒三角形：上右下左的方向 border-style: solid;border-color:transparent;border-width: 170px 50px 0 50px; border-top-color: rgba(255,0,0,0.5)
			 * 然后提供一个3D环境，给外层盒子添加 transform-style: preserve-3d;flat 所有的子元素在2D平面中;preserve-3D 所有的子元素 在3D 平面中
			 * 上面的三角形设置为绝对定位 absolute
			 * 使用css3的transform 三角形按角度转动 排列成钻石的上半部分，同理实现下半部分
			 * rotateY:沿着Y轴实现旋转,translateZ:沿着Z轴移动88px;沿着X轴 旋转31度 
			 * 写一个动画tuoluo 0～50%～100%  沿着z轴旋转
			 * 实现动画的循环播放animation: tuoluo 3s linear infinite; */
			
			
			/*@keysframes*/
			.wrap{
				width: 200px;
				height: 400px;
				margin: 30px auto;
			}
			@keyframes tuoluo{
				0%{
					transform: rotateY(0deg) rotateX(0deg);
				}
				50%{
					transform: rotateY(-180deg) rotateX(18deg);
				}
				100%{
					transform: rotateY(-360deg) rotateX(0deg);
				}
			}
			.wrap .tuoluo{
				width: 100%;
				height: 100%;
				transform-style: preserve-3d; 
				/* flat 所有的子元素在2D平面中*/
				/* preserve-3D 所有的子元素 在3D 平面中*/
				animation: tuoluo 3s linear infinite;
			}
			.wrap .tuoluo .tuoluo-top,
			.wrap .tuoluo .tuoluo-bottom{
				position: relative;
				width: 100%;
				height: 50%;
			}
			.tuoluo-top .face-top{
				position: absolute;
				top: 29px;
				width: 0;
				height: 0;
				border-style: solid;
				border-color: transparent;
				border-width: 0 50px 170px 50px;
				border-bottom-color: rgba(65,92,162,.5);
				/*元素变形基点的位置*/
				transform-origin: center bottom;
			}
			.tuoluo-top .face-top:nth-of-type(1){
				transform: rotateY(0deg) translateZ(88px) rotateX(31deg);
			}
			.tuoluo-top .face-top:nth-of-type(2){
				transform: rotateY(60deg) translateZ(88px) rotateX(31deg);
			}
			.tuoluo-top .face-top:nth-of-type(3){
				transform: rotateY(120deg) translateZ(88px) rotateX(31deg);
			}
			.tuoluo-top .face-top:nth-of-type(4){
				transform: rotateY(180deg) translateZ(88px) rotateX(31deg);
			}
			.tuoluo-top .face-top:nth-of-type(5){
				transform: rotateY(240deg) translateZ(88px) rotateX(31deg);
			}
			.tuoluo-top .face-top:nth-of-type(6){
				transform: rotateY(300deg) translateZ(88px) rotateX(31deg);
			}
			.tuoluo-bottom .face-bottom{
				position: absolute;
				width: 0;
				height: 0;
				border-style: solid;
				border-color: transparent;
				border-width: 170px 50px 0 50px;
				border-top-color: rgba(65,92,162,.5);
				/*元素变形基点的位置*/
				transform-origin: center top;
			}
			.tuoluo-bottom .face-bottom:nth-of-type(1){
				transform: rotateY(0deg) translateZ(88px) rotateX(-31deg);
			}
			.tuoluo-bottom .face-bottom:nth-of-type(2){
				transform: rotateY(60deg) translateZ(88px) rotateX(-31deg);
			}
			.tuoluo-bottom .face-bottom:nth-of-type(3){
				transform: rotateY(120deg) translateZ(88px) rotateX(-31deg);
			}
			.tuoluo-bottom .face-bottom:nth-of-type(4){
				transform: rotateY(180deg) translateZ(88px) rotateX(-31deg);
			}
			.tuoluo-bottom .face-bottom:nth-of-type(5){
				transform: rotateY(240deg) translateZ(88px) rotateX(-31deg);
			}
			.tuoluo-bottom .face-bottom:nth-of-type(6){
				transform: rotateY(300deg) translateZ(88px) rotateX(-31deg);
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="tuoluo">
				<div class="tuoluo-top">
					<div class="face-top"></div>
					<div class="face-top"></div>
					<div class="face-top"></div>
					<div class="face-top"></div>
					<div class="face-top"></div>
					<div class="face-top"></div>
				</div>
				<div class="tuoluo-bottom">
					<div class="face-bottom"></div>
					<div class="face-bottom"></div>
					<div class="face-bottom"></div>
					<div class="face-bottom"></div>
					<div class="face-bottom"></div>
					<div class="face-bottom"></div>
				</div>
			</div>
		</div>
	</body>
</html>

　　

转载于:https://www.cnblogs.com/cxzhijia/p/7497933.html

weixin_30566111
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
宝石旋转.html
weixin_45354103的博客
05-26 1515
宝石旋转.html
CSS 实战 | CSS实现原地360度无限旋转
qq_35536883的博客
08-26 6213
CSS实现div原地无限旋转 直接上代码 .logo { -webkit-animation: animal 4s infinite linear ; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center cente...
钻石旋转展示
04-04
实现一个钻石在屏幕上不断的旋转，非常好看，对于学习visual c＋＋的同学来说是非常好的程序。-
css3制作转石,CSS3 旋转的颜料石
weixin_31885729的博客
08-04 253
CSS语言：CSSSCSS确定.loader {position: fixed;top: 50%;left: 50%;animation: rotate 0 linear infinite;}.loader .container {height: 2vmin;position: absolute;}.loader .container:nth-child(1) {transform: rotate...
css3 3d效果，三个物体旋转同时实现自转
11-03
css3 3d效果，三个物体旋转同时实现自转 css3 3d效果，三个物体旋转同时实现自转
用css画三角形、爱心、钻石
weixin_44739881的博客
10-08 373
如何用css画出来爱心、钻石、多边形
30 个案例教你用纯 CSS 实现常见的几何图形
littledotdot的博客
08-02 472
三角形 传统 border 实现 我们知道，如果设置一个盒子的宽高为 0，盒子就会变成一个点。此时再给上下左右四个 border 一定的宽度和不同的颜色，那么单纯由 border 填充的盒子看起来是这样的： 但内容盒有宽高的时候，四个 border 的对接处就不是一个点，而是一个矩形（图中白色区域），这时候的border 看起来就会和现实中的边框差不多： 因此，要绘制三角形，核心就是设置盒子的宽高为 0，让 border 表现为一个三角形： .delta { width: 0px; height: 0p.
钻石滑块拖动设置价格CSS3特效
06-24
在这个特效中，滑块不仅有常规的水平移动，而且可能还有某种自定义动画，如滑块移动时钻石的放大或旋转效果，这些都可以通过CSS3的`transition`和`animation`属性实现，以增强用户的交互体验。 “拖动设置价格”...
钻石滑块拖动设置价格CSS3特效.zip
10-08
1. **2D/3D转换**：钻石滑块的立体效果得益于CSS3的转换功能，通过translate、rotate和scale等属性实现元素的平移、旋转和缩放，创造出具有深度的视觉效果。 2. **边框半径**：钻石形状的滑块利用了CSS3的边框半径...
实现棱形的CSS样式
08-08
此外，还可以通过修改元素的`transform`属性，实现旋转、翻转等动态效果，使菱形更加生动有趣。例如，将`transform: rotate(45deg);`添加到`.diamond`类中，可以让菱形倾斜45度。 总结来说，创建CSS棱形涉及利用...
HTML5 Canvas 蓝色3D钻石旋转动画
04-16
我们在Canvas画布上通过绘制很多个不同大小的多边形组成了一颗钻石，然后通过CSS3的颜色渐变特性让钻石的表面产生白色发光的特效，同样再利用CSS3的动画属性让钻石不停地旋转，展现出3D的视觉效果，非常炫酷。
CSS3 钻石头像
陈小峰（iefreer）的专栏
09-16 1787
圆形头像见得多了，今天分享一款钻石touxiang
CSS中的3D旋转
m0_56232007的博客
06-09 7226
一、3D旋转 格式： transform：rotateX（旋转角度） transform：rotateY（旋转角度） transform：rotateZ（旋转角度） transform：rotate3d（1,1,1,deg） 指定对象的3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z取值为0/1 0表示不旋转 1表示旋转 注意： ***第4个参数表示旋转的角度，参数不允许省略*** 注意： 浏览器默认是2d的，如果
2019年中国民航大学电子制作比赛---蓝牙音响.zip
08-03
大学生参加学科竞赛有着诸多好处，不仅有助于个人综合素质的提升，还能为未来职业发展奠定良好基础。以下是一些分析： 首先，学科竞赛是提高专业知识和技能水平的有效途径。通过参与竞赛，学生不仅能够深入学习相关专业知识，还能够接触到最新的科研成果和技术发展趋势。这有助于拓展学生的学科视野，使其对专业领域有更深刻的理解。在竞赛过程中，学生通常需要解决实际问题，这锻炼了他们独立思考和解决问题的能力。 其次，学科竞赛培养了学生的团队合作精神。许多竞赛项目需要团队协作来完成，这促使学生学会有效地与他人合作、协调分工。在团队合作中，学生们能够学到如何有效沟通、共同制定目标和分工合作，这对于日后进入职场具有重要意义。 此外，学科竞赛是提高学生综合能力的一种途径。竞赛项目通常会涉及到理论知识、实际操作和创新思维等多个方面，要求参赛者具备全面的素质。在竞赛过程中，学生不仅需要展现自己的专业知识，还需要具备创新意识和解决问题的能力。这种全面的综合能力培养对于未来从事各类职业都具有积极作用。 此外，学科竞赛可以为学生提供展示自我、树立信心的机会。通过比赛的舞台，学生有机会展现自己在专业领域的优势，得到他人的认可和赞誉。这对于培养学生的自信心和自我价值感非常重要，有助于他们更加积极主动地投入学习和未来的职业生涯。 最后，学科竞赛对于个人职业发展具有积极的助推作用。在竞赛中脱颖而出的学生通常能够引起企业、研究机构等用人单位的关注。获得竞赛奖项不仅可以作为个人履历的亮点，还可以为进入理想的工作岗位提供有力的支持。
22NM60N-VB TO220一款N-Channel沟道TO220的MOSFET晶体管参数介绍与应用说明
08-03
22NM60N-VB TO220；Package：TO220；Configuration：Single-N-Channel；VDS：650V；VGS：30（±V）；Vth：3.5V；RDS(ON)=160mΩ@VGS=10V；ID：20A；Technology：SJ_Multi-EPI；
22N60L-VB一款N-Channel沟道TO247的MOSFET晶体管参数介绍与应用说明
08-03
22N60L-VB；Package：TO247；Configuration：Single-N-Channel；VDS：650V；VGS：30（±V）；Vth：3.5V；RDS(ON)=160mΩ@VGS=10V；ID：20A；Technology：SJ_Multi-EPI；
GIS在地质灾害中的应用.pptx
最新发布
08-03
GIS在地质灾害中的应用.pptx
[毕业设计]基于VB.NET的实时通信聊天系统设计与实现(源代码+论文+开题报告+答辩PPT).zip
08-03
[毕业设计]基于VB.NET的实时通信聊天系统设计与实现(源代码+论文+开题报告+答辩PPT)
css动画旋转效果实现
02-27
要实现CSS动画旋转效果，可以通过以下步骤： 1. 在CSS中定义需要旋转的元素，并设置旋转的中心点。 例如： ```css .rotate { transform-origin: center center; } ``` 2. 使用CSS的@keyframes规则定义旋转的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值