css 3d立方体

weapon 发布于2019-08-29 13:14 / 2011人阅读

了解一些css3动画知识，3d效果实现。
原文连接

状态1 首先创建一个立方体容器元素

.box {
     position: relative;
     width: 100px;
     height: 100px;
     transform-style: preserve-3d;
}

transform-style 属性的定义为规定如何在3d空间中呈现被嵌套元素
flat为默认值平面显示，preserve-3d为子元素保留3d位置
也就是该属性在需要展示3d效果元素的父元素上设置

立方体的六个面

创建6个div元素设置相同绝对定位显示，为了效果明显每个面设置了0.5的透明度。

.box div {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: .5;
     transform-origin: center;
}

transform-origin 属性设置被转换元素的位置，可以理解为转换的中心点在哪个位置

状态2

为了显示出立方体的上下面和侧面需要对4个面进行绕X、Y轴的直角转换

.box div:nth-of-type(1),
.box div:nth-of-type(2){
     transform: rotatex(90deg);
}

.box div:nth-of-type(3),
.box div:nth-of-type(4){
     transform: rotatey(90deg);
}

可以给容器增加一定角度突出效果

.box{
     transform: rotatex(45deg) rotatey(45deg);
}

状态3

接下来就是撑开6个面，构建成为立方体啦
在每个面转换的基础上增加/减少宽高二分之一的Z轴位置转换

.box div:nth-of-type(1){
     transform: rotatex(90deg) translatez(50px);
}

.box div:nth-of-type(2){
     transform: rotatex(90deg) translatez(-50px);
}

.box div:nth-of-type(3){
     transform: rotatey(90deg) translatez(50px); 
}

.box div:nth-of-type(4){
     transform: rotatey(90deg) translatez(-50px); 
}

.box div:nth-of-type(5){
     transform: translatez(50px); 
}

.box div:nth-of-type(6){
     transform: translatez(-50px); 
}

这样一个3d立方体就已经构建完成啦 ^_^

云服务器 GPU云服务器 css3d js鼠标拖动3D立方体旋转 java3d正方体创3d 3d打印云服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112462.html

H5打造3d场景不完全攻略（二）: Amazing CSS3D

摘要：实现方法可参考这篇文章纯打造的模型渲染器实现全景。天空盒子相信很多打造过或有了解过全景的同行们都知道这个概念。首先将创建好的六个面切割出来，以命名标记位置。柱形柱形全景也不算复杂。前言对的，本文就是着重介绍如何使用CSS3中的3D变换打造出H5中的3D效果。灵感来源于造物节团队的3d引擎，因为使用方法比较复杂，也没有开源的API文档，于是想自己另外造个轮子，便开始了相关内容的学习和...

fancyLuo 2019-08-29 11:29 评论0 收藏0
CSS动画之旋转魔方轮播

摘要：关于的详细讲解张鑫旭一个基本的立方体就需要结合以上三点属性来实现。写完这篇文章后确实感觉自己对方面的知识又熟悉了不少但是前端的主力还是月份又得继续深入学习方面的知识嘞本文参考内容关于的详细讲解张鑫旭详解彻底理解和的区别的原始出处很久没有回头来复习CSS方面的知识了, 正好又到了月底写文章的deadline......所以这次选择了详细巩固一下CSS3动画有关的知识点,因为之前只是用过...

leone 2019-08-29 15:10 评论0 收藏0
CSS动画之旋转魔方轮播

摘要：关于的详细讲解张鑫旭一个基本的立方体就需要结合以上三点属性来实现。写完这篇文章后确实感觉自己对方面的知识又熟悉了不少但是前端的主力还是月份又得继续深入学习方面的知识嘞本文参考内容关于的详细讲解张鑫旭详解彻底理解和的区别的原始出处很久没有回头来复习CSS方面的知识了, 正好又到了月底写文章的deadline......所以这次选择了详细巩固一下CSS3动画有关的知识点,因为之前只是用过...

LittleLiByte 2019-08-02 10:18 评论0 收藏0
CSS 3D Panorama（全景） - 淘宝造物节技术剖析

摘要：淘宝造物节的活动页就是全景的一个很赞的页面，它将全景图分割成等份，相邻的元素构成的夹角，相邻两侧面相对于棱柱中心所构成的夹角。本文转自凹凸实验室：https://aotu.io/notes/2016/08... showImg(https://segmentfault.com/img/remote/1460000011381045); 前言 3D 全景并不是什么新鲜事物了，但以前...

LiuRhoRamen 2019-08-29 11:16 评论0 收藏0