3d长方体
html
<div class="main">
<div class="a1">1</div>
<div class="a2">2</div>
<div class="a3">3</div>
<div class="center"></div>
<div class="a4">4</div>
<div class="a5">5</div>
<div class="a6">6</div>
</div>
css
div.main{
width: 300px;
height: 300px;
margin: 100px auto;
perspective: 600px;/*3D元素距视图的距离,子元素会获得透视效果*/
perspective-origin: -100% 50%;/*3D元素所基于的X轴和Y轴*/
transform-style: preserve-3d;/*如何在 3D 空间中呈现被嵌套的元素。*/
}
div *{
width: 300px;
height: 300px;
line-height: 300px;
position: absolute;
text-align: center;
font-size: 100px;
}
div.center{
border: red 1px dashed;
}
div.a1{
background-color: rgba(209, 89, 255, 0.42);
transform: translateZ(150px);
}
div.a2{
background-color: rgba(95, 255, 195, 0.42);
transform: translateZ(-150px);
/*translateZ():X平移,rotateY():Y旋转*/
}
div.a3{
background-color: rgba(255, 158, 85, 0.42);
transform: translateX(150px) rotateY(90deg);
}
div.a4{
background-color: rgba(255, 146, 249, 0.42);
transform: translateX(-150px) rotateY(90deg);
}
div.a5{
background-color: rgba(82, 31, 255, 0.42);
transform: translateY(150px) rotateX(90deg);
}
div.a6{
background-color: rgba(166, 255, 56, 0.42);
transform: translateY(-150px) rotateX(90deg);
}
3d长方体的更多相关文章
- CSharpGL(8)使用3D纹理渲染体数据 (Volume Rendering) 初探
CSharpGL(8)使用3D纹理渲染体数据 (Volume Rendering) 初探 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码 ...
- 使用 CSS3 实现 3D 图片滑块效果【附源码下载】
使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...
- 基于HTML5快速搭建3D机房设备面板
以真实设备为模型,搭建出设备面板,并实时获取设备运行参数,显示在设备面板上,这相比于纯数值的设备监控系统显得更加生动直观.今天我们就在HT for Web的3D技术上完成设备面板的搭建. 我们今天模拟 ...
- 基于HT for Web 快速搭建3D机房设备面板
以真实设备为模型,搭建出设备面板,并实时获取设备运行参数,显示在设备面板上,这相比于纯数值的设备监控系统显得更加生动直观.今天我们就在HT for Web的3D技术上完成设备面板的搭建. 我们今天模拟 ...
- 基于HT for Web 3D技术快速搭建设备面板
以真实设备为模型,搭建出设备面板,并实时获取设备运行参数,显示在设备面板上,这相比于纯数值的设备监控系统显得更加生动直观.今天我们就在HT for Web的3D技术上完成设备面板的搭建. 我们今天模拟 ...
- 罪恶装备 Xrd REVELATOR 3D进化出的非照片真实视觉
GUILTY GEAR Xrd REVELATOR 3D进化出的非照片真实视觉 罪恶装备系列是用2D日系动画一样的惊异视觉来吸引玩家的. 最新续品[GUILTY GEAR Xrd-REVELATOR- ...
- [Aaronyang] 写给自己的WPF4.5 笔记23 [3d交互与动画 4/4]
效果图预览: 1. 3d中的命中测试 我新建了一个空的窗口,用zam做了一个长方体,深度很小.然后导出xaml <Viewport3D x:Name="ZAM3DViewport3D& ...
- 转一篇讲camera的 mb好多年不搞3d 都忘光了
Camera定义 游戏中,Camera用来向用户展示场景,Camera就像一个摄像机,摄像机里面的景象就是Camera的展示范围,如下图所示: 在3D空间中Camera被定义为一个位置,有一个单位“方 ...
- [OpenGL ES 03]3D变换:模型,视图,投影与Viewport
[OpenGL ES 03]3D变换:模型,视图,投影与Viewport 罗朝辉 (http://blog.csdn.net/kesalin) 本文遵循“署名-非商业用途-保持一致”创作公用协议 系列 ...
随机推荐
- 用sql语句查询一列名中的各个数值的个数
SELECT COUNT(case when f.fileState=2 then 0 end) as fixed,COUNT(case when f.fileState=3 then 0 end) ...
- codeforces#1183H. Subsequences(字符串dp)
题目链接: http://codeforces.com/contest/1183/problem/H 题意: 给出一个长度为$n$的字符串,得到$k$个子串,子串$s$的花费是$n-|s|$ 计算最小 ...
- mysql与Oracle的区别:
1. Oracle是大型数据库而Mysql是中小型数据库,Oracle市场占有率达40%,Mysql只有20%左右,同时Mysql是开源的而Oracle价格非常高. 2. Oracle支持大并发,大 ...
- JS各循环的差别
1.最普通的for循环: for(var i=0;i<arr.length;i++){ } 特点:只能针对数组循环,不能引用于非数组对象 2.for(var i in obj){ } 特点:用于 ...
- MySQL的分页查询及Oracle分页查询
MySQL: Select ... from ...where ...order by...limit start,pageNum 例:比如从 取 个数据 , String sql = )*pageR ...
- 解决android sdk docs帮助文档打开慢的问题
解决android sdk docs帮助文档打开慢的问题 转https://blog.csdn.net/yang5726685/article/details/80543849 经查是因为本地文档中的 ...
- 数据分析 - pandas 模块
数据读取结构 - DataFrame Series (collection of values) DataFrame (collection of Series objects) Panel (co ...
- Git入门之在IDEA中使用Git上传maven项目
下载安装git客户端: 参考博文:https://www.cnblogs.com/java-maowei/p/5950930.html 在IDEA怎么使用git上传spring的maven项目详解: ...
- php如何开启gd2扩展
extension=php_gd2.dll 找到php的配置文件php.ini,搜索extension=php_gd2.dll,去掉前面的分号即可:如果没有直接添加这种情况适合于windows系统和编 ...
- NET全控件
NBSI WebSite Injection ReportSite Address: www.xmht.comInject URL: http://www.xmht.com/news.aspx?sty ...