html怎么做成3d正方体,利用CSS3的3D效果制作正方体
学会用CSS3的3D效果制作一个正方体,有助于增强我们对3D场景的旋转和位移属性的理解。下面的动态图就是利用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...............
- 前
- 后
- 左
- 右
- 上
- 下
上图就是6个li中间的文字互相重叠的效果,也是li的初始位置,我们将在此基础上进行3D变换。
2.为了方便对整个正方体进行3D变换,一般我们以ul(父元素)的初始位置为变换的起点,需要注意的是,transform: translateZ(-100px) rotateY(180deg);和transform: rotateY(180deg) translateZ(-100px);两者的效果是不一样的,要根据实际情况进行合适的变换。
在上面的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怎么做成3d正方体,利用CSS3的3D效果制作正方体相关推荐
- css3制作正方体,利用CSS3的3D效果制作正方体
学会用css3的3d效果制作一个正方体,有助于增强我们对3d场景的旋转和位移属性的理解.下面的动态图就是利用3d旋转位移,结合动画效果制作的.感兴趣的同学可以在完成正方体的制作基础上,再去探究一下添加 ...
- css使图片有3d效果,利用CSS3实现3D倾斜视差图片展示特效
特效描述:利用CSS3实现 3D倾斜 视差图片 展示特效.利用CSS3实现3D倾斜视差图片展示特效 代码结构 1. HTML代码 Movies Popular Princess Mononoke Sp ...
- css拖动音乐进度条,利用CSS3实现3D滑块进度条拖动动画特效
特效描述:利用CSS3实现 3D滑块 进度条拖动 动画特效.利用CSS3实现3D滑块进度条拖动动画特效 代码结构 1. HTML代码 Scalable 3D Range Sliders Simple ...
- 如何用css实现左右翻页效果图,如何利用CSS3实现3D翻书效果
这篇文章主要介绍了CSS3实现3D翻书效果,基于CSS3新属性Animation及transform实现类似翻书效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 先上效果图:(样式有点丑,可以忽 ...
- css动画效果制作正方体旋转相册
以下代码利用css动画效果制作了一个旋转的正方体,给正方体六个面放置好图片就可以当一个炫酷有趣的正方体旋转相框啦!可以将女朋友的照片放进去哦,赶快去试试,给女朋友一个惊喜吧! 下面没有放入背景建议大家 ...
- 利用css3实现3d立体特效--正方体
其实css3中提供了很多让我们实现非常炫酷的工具,好多特效不需要通过复杂的js代码来实现,而可以通过简单的css3代码来实现,这一次我就给大家介绍一下3d立体盒子的实现以及动画的实现. 要实现这个正当 ...
- 利用css3的3d旋转透视加动画做的一个骰子动态效果
实现效果 代码 <div class="father"><div class="son son1">1</div><d ...
- 教你如何利用灰度图透明效果制作隐藏图片.Part2
前言 文章http://blog.csdn.net/chenzhuyu/article/details/52483394 中介绍了利用像素交替+蒙版的方法制作隐藏图片 实现在QQ界面中,预览与查看显示 ...
- 教你如何利用灰度图透明效果制作隐藏图片.part1
#更新 使用深色图片简单实现隐藏图片二不需要网格抠图 http://blog.csdn.net/chenzhuyu/article/details/54766757 #效果图: 在QQ聊天的时候,图片 ...
最新文章
- python【力扣LeetCode算法题库】26-删除排序数组中的重复项
- JavaScript实现京东购物车页基础面效果
- NYOJ 767 因子和
- 去中心化钱包CoinU基本介绍,你想知道的都有。
- 计算机的键盘功能,电脑键盘功能
- ros中move_group的参数动态设置
- java常用算法手册 赵志云_Java常用算法手册
- 千万别说你会Python!如果不知道这10个Python包!
- 【转载】word空白页删不掉的7种原因及解决方法
- 中国象棋马走日(要求打印每一种走法) — 递归
- DNA甲基化芯片专题
- 关于什么是AndroidX(一)
- 爬虫实战:英雄联盟手游能“干掉”王者荣耀?微博4.3亿网友吵翻了……
- 多个线程ThreadLocal中存的是什么
- 淘宝天猫商家运营,宝贝标题如何突出卖点,标题编写方法小技巧
- The Design of design
- 总结一下,小灰的2020年!
- 二叉树专题 -- 持续更新
- [操作系统]死锁/RAG图/银行家算法
- 文存阅刊杂志文存阅刊杂志社文存阅刊编辑部2023年第1期目录
热门文章
- 【Cocos2d-X开发学习笔记】第05期:渲染框架之布景层类(CCLayer)的使用
- 3.0 面向对象 委托和事件 异常和错误
- 编译安装PHP出现Cannot load /usr/local/apache/modules/libphp5.so
- 实现DropDownList 无刷新的联动效果
- 理解XML Schema: XML Schema 初步 (I)(转)
- 华为机试HJ83:二维数组操作
- dubbo几种协议_Dubbo面试(简)
- 台式电脑计算机怎么添加任务栏,win10系统任务栏添加计算机快捷图标的详细技巧...
- mvc html 辅助方法,MVC HTML辅助类常用方法记录
- unity3d 求两个点长度_Unity3D实现体积光