利用CSS3的3D效果制作正方体


Posted in HTML / CSS onMarch 10, 2020

学会用CSS3的3D效果制作一个正方体,有助于增强我们对3D场景的旋转和位移属性的理解。下面的动态图就是利用3D旋转位移,结合动画效果制作的。感兴趣的同学可以在完成正方体的制作基础上,再去探究一下添加各种动画效果。

利用CSS3的3D效果制作正方体

进入主题,以下是使用3D多重变换制作一个正方体的过程。
在此之前需要明白的是,正方体中各个面的的x,y,z坐标轴是以各自面的中心点展开的,也就是说对某个面进行3D变换,就要以某个面为坐标轴基准。若是要对正方体整体进行变换,就需要找到父元素的原始位置,上图中为紫色透明的平面。

1.正方体是由6个面通过旋转位置构成的,因此我们先要构建6个面,并设置其属性值和3D属性,这里我使用ul和li的组合来构建,当然也可以使用其它的块状元素构建。

CSS样式..........

*{margin:0;padding: 0;}
   li{list-style: none;}
   html,body{height: 100%;}
   body{perspective: auto;}/*设置3D景深*/
   .box1{
    width:200px;
    height:200px;
    position: absolute;
    left: 0;right: 0;top: 0;bottom: 0;margin: auto;/*使ul在屏幕正中的位置*/
    background: rgba(244,4,253,0.3);/*给ul一个紫色透明的背景*/
    transform-style:preserve-3d;/*定义ul的样式为3D属性*/
    animation: box 10s 0.3s linear infinite;
    }
   li{
    width: 200px;
    height: 200px;
    position: absolute;left: 0;top: 0;/*使6个li在屏幕正中位置的互相重叠*/
    font:50px/200px "微软雅黑";
    color: white;
    text-align: center;
    } 
   ul{
   transform: rotateY(20deg) rotateX(20deg);/*让ul旋转一定的角度,方便观察各个面的变换效果*/
   }
html...............
<ul class="box1">
    <li>前</li>
    <li>后</li>
    <li>左</li>
    <li>右</li>
    <li>上</li>
    <li>下</li>  
</ul>

利用CSS3的3D效果制作正方体

上图就是6个li中间的文字互相重叠的效果,也是li的初始位置,我们将在此基础上进行3D变换。

2.为了方便对整个正方体进行3D变换,一般我们以ul(父元素)的初始位置为变换的起点,需要注意的是,transform: translateZ(-100px) rotateY(180deg);和transform: rotateY(180deg) translateZ(-100px);两者的效果是不一样的,要根据实际情况进行合适的变换。

利用CSS3的3D效果制作正方体

在上面的CSS代码下添加如下代码:

li:nth-child(1){
    background: #ff0;
    transform: translateZ(100px);
   }
   li:nth-child(2){
    background: #330;
    transform: translateZ(-100px) rotateY(180deg);
   }
   li:nth-child(3){
    background: #f00;
    transform: translateX(-100px) rotateY(-90deg);
   }
   li:nth-child(4){
    background: #0f0;
    transform: translateX(100px) rotateY(90deg);
   }
   li:nth-child(5){
    background: #0ff;
    transform: translateY(-100px) rotateX(90deg);
   }
   li:nth-child(6){
    background: #00f;
    transform: translateY(100px) rotateX(-90deg);
   }

上面的代码中,用的是先位移再旋转的方式,也可以对li:nth-child(3)使用先旋转再位移的方法,代码就需要改为transform: rotateY(-90deg) translateZ(100px);位移的坐标轴变成了Z轴,这是因为旋转之后,li:nth-child(3)的朝向发生了改变,正方体的左边由原来的X轴方向变成了Z轴方向。

以上就是CSS3制作正方体效果的一种方式,还可以在代码中添加hover(悬浮)、animation(动画)、transtion(过渡)等效果,增加代码的趣味性。只要理解了3D多重变换的使用方法,还能使用多种方法实现正方体的效果。

总结

到此这篇关于利用CSS3的3D效果制作正方体的文章就介绍到这了,更多相关css3 3D正方体内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
css3 box-sizing属性使用参考指南
Jan 08 HTML / CSS
使用css3匹配手机屏幕横竖状态
Jan 27 HTML / CSS
纯CSS实现聊天框小尖角、气泡效果
Apr 04 HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
Mar 19 HTML / CSS
CSS3制作圆形滚动进度条动画的示例
Nov 05 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
Jul 12 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(一)
Jan 21 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
May 12 HTML / CSS
canvas之自定义头像功能实现代码示例
Sep 29 HTML / CSS
localStorage、sessionStorage使用总结
Nov 17 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
Jul 16 HTML / CSS
萌新HTML5 入门指南(二)
Nov 09 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
Mar 06 #HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
Mar 06 #HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
Feb 27 #HTML / CSS
CSS3标注引用的出处和来源的方法
Feb 25 #HTML / CSS
CSS3关于z-index不生效问题的解决
Feb 19 #HTML / CSS
css3针对移动端卡顿问题的解决(动画性能优化)
Feb 14 #HTML / CSS
css3实现圆锥渐变conic-gradient效果
Feb 12 #HTML / CSS
You might like
松下Panasonic RF-B65电路分析
2021/03/02 无线电
php中session过期时间设置及session回收机制介绍
2014/05/05 PHP
Win2003+apache+PHP+SqlServer2008 配置生产环境
2014/07/29 PHP
PHP中串行化用法示例
2016/11/16 PHP
详解PHP用substr函数截取字符串中的某部分
2016/12/03 PHP
laravel批量生成假数据的方法
2019/10/09 PHP
js 图片缩放(按比例)控制代码
2009/05/27 Javascript
极易被忽视的javascript面试题七问七答
2016/02/15 Javascript
JavaScript的instanceof运算符学习教程
2016/06/08 Javascript
JavaScript检测原始值、引用值、属性
2016/06/20 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
理解javascript中的Function.prototype.bind的方法
2017/02/03 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
微信小程序request出现400的问题解决办法
2017/05/23 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
2018/11/30 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
python读取注册表中值的方法
2013/04/08 Python
Python深入学习之闭包
2014/08/31 Python
python使用wmi模块获取windows下硬盘信息的方法
2015/05/15 Python
python中requests使用代理proxies方法介绍
2017/10/25 Python
Python数据类型中的“冒号“[::]——分片与步长操作示例
2018/01/24 Python
详解Django-restframework 之频率源码分析
2019/02/27 Python
Python matplotlib读取excel数据并用for循环画多个子图subplot操作
2020/07/14 Python
纯CSS3实现绘制各种图形实现代码详细整理
2012/12/26 HTML / CSS
澳大利亚旅游网站:Lastminute
2017/08/07 全球购物
澳大利亚百货公司:David Jones
2018/02/08 全球购物
教导主任竞聘演讲稿
2014/05/16 职场文书
测绘工程专业求职信
2014/07/15 职场文书
授权委托书
2014/07/31 职场文书
国际贸易实训报告
2014/11/05 职场文书
铁路安全反思材料
2014/12/24 职场文书
幼儿园2016年圣诞活动总结
2016/03/31 职场文书
Python离线安装openpyxl模块的步骤
2021/03/30 Python
python 遍历磁盘目录的三种方法
2021/04/02 Python