利用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制作精致的照片墙特效
Jun 07 HTML / CSS
CSS3弹性布局内容对齐(justify-content)属性使用详解
Jul 31 HTML / CSS
css3+jq创作含苞待放的荷花
Feb 20 HTML / CSS
CSS Grid布局教程之什么是网格布局
Dec 30 HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
May 18 HTML / CSS
举例详解CSS3中的Transition
Jul 15 HTML / CSS
CSS3 box-sizing属性详解
Nov 15 HTML / CSS
CSS3,线性渐变(linear-gradient)的使用总结
Jan 09 HTML / CSS
使用html2canvas实现浏览器截图的示例代码
Jan 26 HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
Jul 16 HTML / CSS
html5教程画矩形代码分享
Dec 04 HTML / CSS
html5图片上传预览示例分享
Apr 14 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
php 特殊字符处理函数
2008/09/05 PHP
PHP 单引号与双引号的区别
2009/11/24 PHP
php 中英文语言转换类
2011/09/07 PHP
具有时效性的php加密解密函数代码
2013/06/19 PHP
利用php做服务器和web前端的界面进行交互
2016/10/31 PHP
利用Laravel事件系统如何实现登录日志的记录详解
2017/05/20 PHP
laravel请求参数校验方法
2019/10/10 PHP
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
JavaScript 打地鼠游戏代码说明
2010/10/12 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
js实现一个省市区三级联动选择框代码分享
2013/03/06 Javascript
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
2016/01/28 Javascript
微信小程序开发一键登录 获取session_key和openid实例
2016/11/23 Javascript
checkbox:click事件触发span元素内容改变的方法
2017/09/11 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
[03:55]2016国际邀请赛中国区预选赛首日TOP10精彩集锦
2016/06/27 DOTA
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
Python的装饰器用法学习笔记
2016/06/24 Python
彻底理解Python list切片原理
2017/10/27 Python
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
马歇尔耳机官网:Marshall Headphones
2020/02/04 全球购物
六年级数学教学反思
2014/02/03 职场文书
大专生毕业的自我评价
2014/02/06 职场文书
体育教师个人的自我评价
2014/02/16 职场文书
服务理念标语
2014/06/18 职场文书
学生安全责任书范本
2014/07/24 职场文书
预备党员2014年第四季度思想汇报范文
2014/10/25 职场文书
中学生逃课检讨书
2015/02/17 职场文书
故意伤害辩护词
2015/05/21 职场文书
团组织关系介绍信
2019/06/24 职场文书
Java GUI编程菜单组件实例详解
2022/04/07 Java/Android