多面体

最新推荐文章于 2020-08-13 10:38:43 发布
最新推荐文章于 2020-08-13 10:38:43 发布
阅读量139 收藏
点赞数
分类专栏： css
blank
本文链接：https://blog.csdn.net/qq_41418797/article/details/107683359
版权 
<!DOCTYPE html>
<html>
<head>
<title>多面体</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
background:url(img/1.jpg) 450px 20px no-repeat;
background-size: 500px 330px;
-webkit-box-reflect: below 16px -webkit-linear-gradient(transparent,transparent 40%,rgba(255,255,255,0.6));
}
.box{
	width: 500px;
				height: 330px;
				text-align: center;
				margin: 0 auto;
				background: url(img/3.jpg);
				-webkit-box-reflect: below 16px -webkit-linear-gradient(transparent,transparent 40%,rgba(255,255,255,0.6));
}
.sharp {
animation: ani 2s linear infinite;


}
div {
transform-style: preserve-3d;
transform: translate(-50%, -50%) rotate3d(0, 1, 0, 72deg);
position: absolute;
left: 50%;
top: 50%;

}
span { /*利用边框做一个三角形*/
border-color: transparent transparent rgba(255, 255, 255, 0.5) transparent;/*每个span下方设置颜色，其余边透明*/
border-width: 173.2px 100px;
border-style: solid;
width: 0;
height: 0;
position: absolute;
left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -346.4px;

}

span:before { /*利用边框在span中做一个三角形，实现嵌套，让span变成边框,span:before变成要显示的东西*/
content: '';
border-color: transparent transparent rgba(0, 123, 123, 0.5) transparent;/*设置每面的颜色*/
border-width: 165.2px 92px;
border-style: solid;
width: 0;
height: 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin-top: 4px;
}

/*一个div中有五个span，那么通过上一步就做成了五个三角形，将这五个三角形进行3D位移加旋转,形成了最上面顶部的五个三角形
 *transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix
 * 1.rotate() ：通过指定的角度参数对原元素指定一个2D rotation（2D 旋转），需先有transform-origin属性的定义。
 * transform-origin定义的是旋转的基点，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。
 * 如：transform:rotate(30deg);
 * 2.translate(x,y),它表示对象进行平移，按照设定的x,y参数值,当值为负数时，反方向移动物体，其基点默认为元素 中心点，也可以根据transform-origin进行改变基点。
 * 3.scale(x,y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）；scaleX(x)元素仅水平方向缩放（X轴缩放）；scaleY(y)元素仅垂直方向缩放（Y轴缩放），但它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小。
 * 4.skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）*/
div span:nth-child(1) {
	
transform: rotate3d(0, 1, 0, 72deg) rotate3d(1, 0, 0, 51.5deg);
}

div span:nth-child(2) {
transform: rotate3d(0, 1, 0, 144deg) rotate3d(1, 0, 0, 51.5deg);
}

div span:nth-child(3) {
transform: rotate3d(0, 1, 0, 216deg) rotate3d(1, 0, 0, 51.5deg);
}

div span:nth-child(4) {
transform: rotate3d(0, 1, 0, 288deg) rotate3d(1, 0, 0, 51.5deg);
}

div span:nth-child(5) {
transform: rotate3d(0, 1, 0, 360deg) rotate3d(1, 0, 0, 51.5deg);
}

/*将上步的div做一个整体的3d变换,变幻属性用空格隔开*/
.sharp div:nth-child(1) {
	
transform: translateY(51px) rotateY(108deg) rotateX(116deg) translateZ(31px);
}

.sharp div:nth-child(2) {
transform: translateY(51px) rotateY(180deg) rotateX(116deg) translateZ(31px);
}

.sharp div:nth-child(3) {
transform: translateY(51px) rotateY(252deg) rotateX(116deg) translateZ(31px);
}

.sharp div:nth-child(4) {
transform: translateY(51px) rotateY(324deg) rotateX(116deg) translateZ(31px);
}

.sharp div:nth-child(5) {
transform: translateY(51px) rotateY(396deg) rotateX(116deg) translateZ(31px);
}

@keyframes ani {
100% {
transform: rotateX(360deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="sharp">
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</body>
</html>

http://127.0.0.1:8020/nnnnnnnnnnnn/%E5%A4%9A%E9%9D%A2%E4%BD%93.html?__hbt=1596075169116

效果演示

奋斗的小菇凉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
采用OpenCv——多边形等距收缩实现
lan_xuewei的博客
08-17 6573
摘要 最近由于公司业务需求，需要实现对一个多边形进行等距收缩一定距离，其实现效果图大致如下： 虽然单点距离貌似收缩情况不太正确，不过看起来还是蛮顺眼的。反正领导看到一眼就说他要这样的，好嘞，小二马上给你搞。由于OpenCv针对于图形处理具有较多优秀的算法，并且当时找到一篇收缩算法正是用这个玩意做的，于是参考该作者的C++代码，实现了一版Java对应的版本。由于OpenCv是C++函数库，并...
matlab开发-多面体和多面体
08-24
在MATLAB环境中，多面体和多面体的开发是一个重要的领域，这通常涉及到几何建模、图形渲染以及数据分析。本项目提供了一套程序，用于在多面体和多面体上执行各种操作，这对于科学计算、工程设计或可视化应用来说具有...
PolyhedraSaver-develop凸多面体消隐原理
最新发布
02-08
凸多面体消隐原理是计算机图形学中的一个重要概念，主要应用于三维模型的渲染和可视化。在三维场景中，物体可能会因为重叠而遮挡彼此，消隐算法就是用来确定哪些部分应该显示在前面，哪些应该被隐藏。在这个主题中，...
ArcGIS教程：多面体
01-21
ArcGIS 多面体要素教程 ArcGIS 中的多面体要素是一种可存储面集合的 GIS 对象，能够在数据库中将 3D 对象的边界表示为单个行。面可存储表示要素组成部分的纹理、颜色、透明度和几何信息。多面体要素可以用于表示...
vor3d_混凝土_随机骨料_骨料_3Dvoronoi多面体生成_
10-03
本教程将详细讲解如何利用Python编程语言中的vor3d库来生成混凝土中的随机骨料，即3D Voronoi多面体。 首先，让我们了解一下Voronoi图的基本概念。Voronoi图，又称Dirichlet分区，是一种几何分割方法，它将空间分割...
CSS综合案例-品优购电商04
奋斗的小能能的博客
08-12 1720
目录 1. 品优购项目(四) 1). 详情页 detail.html 常用单词 2). 面包屑导航 3). 产品介绍 模块 4). 预览区域制作 3.1 preview_list 制作 5). 产品详细信息区域制作 itemInfo_wrap 6). 产品细节模块 product_detail 6.1) aside 布局 6.2) detail 布局 7.详情页代码 8. 注册页面 register 8.1 registerarea布局 9.注册页代码 1. 品优购项目(.
黑色二级导航菜单
奋斗的小能能的博客
07-30 863
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS3黑色二级导航菜单</t.
CSS综合案例-品优购电商02
奋斗的小能能的博客
08-12 567
目录 品优购项目(二) 1. 品优购首页布局 1). nav 导航栏制作 2). footer 底部制作 3). mod_service 服务模块制作 4). main 主体模块制作 5). newsflash 新闻快报模块 6). news 新闻模块 7). lifeservice 生活服务模块 8). recommend 推荐模块 2.综合代码 index.html base.css common.css index.css 品优购项目(二) 目标： 能课堂跟上p
表单注册登录切换
奋斗的小能能的博客
07-30 505
<!DOCTYPE html> <html> <head> <title>登录注册表单切换</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type=.
CSS综合案例-品优购电商01
奋斗的小能能的博客
08-11 473
目录 品优购项目(一) 1. 品优购项目介绍 2. 项目背景 3. 设计目标 4. 几点思考 5. 代码规范 6. 前期准备工作 目录文件夹 样式文件的分类 7. 网站ico图标 1). 使用ico图标 2). 制作ico图标 8. 网站优化三大标签 9. 字体图标 1. 字体图标优点 2. 字体图标使用流程 3. 设计字体图标 4. 上传生成字体包 5. 下载兼容字体包 6. 字体引入到HTML 7. 追加字体图标 拓展@ 常见字体格式 10. 品优购首页布局
表单居中 与自适应图片背景图
奋斗的小能能的博客
07-30 372
表单居中： form本来就只是一个表单而已，对页面根本就没有布局上的作用.，因此无论怎么设置都是无法居中的，但是依旧有办法解决的； 解决办法：在外面套一层<divstyle="width:100%;text-align:center"></div> 自适应图片背景图： <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/.
CSS综合案例-品优购电商03
奋斗的小能能的博客
08-12 367
目录 品优购项目(三) 1. 首页制作 1). 楼层区 floor 2). 家用电器模块 3). box-hd 模块 4). box-bd 模块 5). 侧边栏 fixedtool 制作 6). 知识点 -过渡(CSS3) 2. 列表页制作 1). 列表页准备工作 2). 列表页 header 和 nav 修改 3). 列表页主体盒子 sk _container 4). sk_goods 布局 5). 分页制作 page 6). 知识点 -获得焦点元素 3.综合代码 1.f
垂直时间轴
奋斗的小能能的博客
07-30 349
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML5+CSS3响应式垂直时间轴</title> <link rel="stylesheet" href="style.css" /> <st.
CSS-07
奋斗的小能能的博客
08-11 311
目录 CSS高级技巧 1. 元素的显示与隐藏 1.1 display 显示（重点） 1.2 visibility 可见性 (了解) 1.3 overflow 溢出(重点) 1.4 显示与隐藏总结 2. CSS用户界面样式 2.1 鼠标样式cursor 2.2 轮廓线 outline 2.3 防止拖拽文本域resize 2.4 用户界面样式总结 3. vertical-align 垂直对齐 3.1 图片、表单和文字对齐 3.2 去除图片底侧空白缝隙 4. 溢出的文字省略号显示
HTML5/CSS3
奋斗的小能能的博客
08-13 289
目录 HTML5 一、什么是 HTML5 HTML5 的概念与定义 HTML5 拓展了哪些内容 HTML5 的现状 二、HTML5 新增标签 什么是语义化 新增了那些语义化标签 使用语义化标签的注意 三、多媒体音频标签 多媒体标签有两个，分别是 audio 标签说明 audio 支持的音频格式 audio 的参数 5、audio 代码演示 四、多媒体视频标签 video 视频标签 语法格式 video 参数 video 代码演示 多媒体标签总结 五、新增 inpu
CSS-01
奋斗的小能能的博客
08-10 239
引入CSS样式表 4.1 行内式（内联样式） 概念： 称行内样式、行间样式. 是通过标签的style属性来设置元素的样式 其基本语法格式如下： <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名> 实际上任何HTML标签都拥有style属性，用来设置行内式。 案例： <div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱&l
HTML5/CSS3-02
奋斗的小能能的博客
08-13 212
目录 HTML5 第二天 一、rotate 使用步骤： 案例代码 二、三角 二、设置元素旋转中心点(transform-origin) transform-origin 基础语法 重要知识点 三、旋转中心案例 四、2D 转换之 scale 五、图片放大案例 六、分页按钮案例 七、 2D 转换综合写法以及顺序问题 八、 动画(animation) 九、动画序列 十、动画常见属性 十一、 动画简写方式 十二、速度曲线细节 十三、案例 1.奔跑的熊大 ​2.阴阳师动画行.
动态背景用户登录
奋斗的小能能的博客
07-30 191
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态背景登录</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <!--背景--> <div class="wel" id="back.
ABAQUS中Python脚本实现Voronoi多面体制作教程
在ABAQUS中生成Voronoi多面体是一种常见的技术，特别是在模拟晶体结构或类似系统时，这些多面体有助于构建复杂的几何形状。Voronoi图是一种空间分割方法，通过连接每个点到其最近邻的距离来定义区域。ABAQUS作为一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值