简单CSS3代码实现立方体以及3D骰子
1 实现3D立方体
首先准备好UL以及6个Li;
代码如下
ul {
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%) // 以上代码主要是使ul居中而已
transform-style: preserve-3d; // 使子元素保留其3D视角
-webkit-perspective: 0; //视距离,默认值为0
}
li {
width: 200px;
height: 200px;
position: absolute;
}
此时,6个LI是重叠一起,如下
我们分别调整6个li的位置,从而实现立方体6个面的效果
//上下面
rotateX(90deg)意为:将2个li沿着X轴旋转90度,此时垂直于上图1,构成了立方体的上下面。
translateZ(100px) : 旋转后2个LI是在重叠在中间的,我们还需要它一个需要往上走LI边长的一半,一个下走LI边长的一半。
css代码:
li:nth-of-type(2) {
background: rgba(255, 10, 230, 0.5);
transform: rotateX(90deg) translateZ(100px)
}
li:nth-of-type(3) {
background: rgba(0, 10, 230, 0.5);
transform: rotateX(90deg) translateZ(-100px)
}
//上下面结束
//左右面
左右面的原理跟上下面一样,只不过是沿着Y轴旋转,这样才能形成左右面
li:nth-of-type(4) {
background: rgba(25, 100, 230, 0.5);
transform: rotateY(90deg) translateZ(100px)
}
li:nth-of-type(5) {
background: rgba(0, 10, 71, 0.5);
transform: rotateY(90deg) translateZ(-100px)
}
//左右面结束
//前后面:前后面不用旋转,直接一个往前走边长一半,一个向后走一半即可
li:nth-of-type(1) {
background: rgba(40, 200, 100, 1);
transform: translateZ(100px)
}
li:nth-of-type(6) {
background: rgba(255, 35, 30, 0.5);
transform: translateZ(-100px)
}
写完以上代码后,立方体就已经完成了,但是此时你看到的还是跟上面的图1一样,那是因为我们的视角-webkit-perspective:为0,就像你坐在教室,左中右三列,如果你坐在中间一列,那么你看到讲台上的粉笔盒也只是一个正方形,而非一个立方体。想要看到立方体的效果,你可以转换你的视角,设置ul的-webkit-perspective:为100PX或者其他像素;;;也可以把粉笔盒子旋转或者倾斜一下 ,设置Ul的 transform: rotateX(-45deg) rotateY(-45deg) ,此时你应该能看到:
还可以给ul添加一个过渡效果: transition: all 0.5s;
ul:hover{ transform: rotateX(80deg) rotateY(-45deg); }
至此,3D立方体我们就已经完成了。下面做3D骰子的效果。
2 :实现3D骰子
首先定义好一个动画:
@-webkit-keyframes run {
0% {
transform: rotateX(900deg) rotateY(6000deg) translateY(-400px)
}
100% {
transform: rotateX(0deg) rotateY(0deg) translateY(0px)
}
}
动画大家自己写,上面的动画仅仅提供了一个旋转下落的效果,仅作为一个思路的参考
点击骰子的时候给UL添加一个类,注意animation里面的动画名要跟外面ke-yframes的名对应,
.run {
animation: run 5s ease; (动画名 持续时间 速度) //animation总有8个参数
}
写完动画效果后,还要实现骰子的功能,下面是我自己的思路:
var arr = ["red", "black", "green", "purple", "pink", "blue"] // 自己定义的LI的颜色
var arr2 = [1, 2, 3, 4, 5, 6]
定义好6个数字,每次点击骰子的时候让颜色arr1以及数字arr2进行随机排序,然后重新插回LI中。
由于我们动画结束后,每次展示的都是第一个li的数字及颜色,我们点击时对数字随机排序,从而实现虽然每次展示的都是第一个Li,但是第一个li的颜色以及数字都是随机的,模拟骰子的效果
关键代码如下:
var o = document.querySelector(".wrap");
var l = document.querySelectorAll(".wrap li");
arr.sort(function() {
return Math.random() - 0.5
})
arr2.sort(function() {
return Math.random() - 0.5
})
var that = this;
that.classList.remove("run");
for (var i = 0; i < l.length; i++) {
l[i].innerHTML = arr2[i];
l[i].style.backgroundColor = arr[i]
}
setTimeout(function() {
o.onclick = numClick;
}, 5100)
setTimeout(function(argument) {
that.classList.add("run");
}, 0)
}
说明:
每次点击前先移除原有的run类名,再重新添加run类,从而实现每次点击的动画效果;
点击后,让点击事件暂时为Null,防止用户重复点击,动画结束后再恢复点击事件(本例动画为5000MS , 则在5100ms后让事件恢复)
转载于:https://www.cnblogs.com/zhengrunlin/p/5936469.html
简单CSS3代码实现立方体以及3D骰子相关推荐
- html制作3d筛子,JS实现简单随机3D骰子
本文实例为大家分享了JS实现简单随机3D骰子的具体代码,供大家参考,具体内容如下 描述: JS--实现简单的随机3D骰子. 效果: 实现: html文件: Document PLAY css文件: @ ...
- 网页制作使用CSS样式制作轮播教程,静态网页设计与开发 1.案例——CSS3制作图片轮播图 (4)使用纯CSS3代码实现简单的图片轮播——分步骤实现.docx...
使用纯CSS3代码实现简单的图片轮播 设计思路: 以5张图片为例: 1.基本布局: 通过设置每张图片的尺寸和父容器的尺寸,从而将5张图片横向并排放入一个div容器(#photos)内.所有图片设置统一 ...
- JS——实现简单的随机3D骰子
描述: JS--实现简单的随机3D骰子. 效果: 实现: html文件: <!DOCTYPE html> <html lang="en"><head& ...
- CSS3的2D转换和3D转换,你了解了嘛?
css3的2D转换和3D转换 CSS3大纲: 本次讲解css3带来了两种转换:2D转换和3D转换 1. 2D转换 转换( transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移(tr ...
- CSS3实现的4种3D文字效果
本文将介绍css3实现的4种3D文字效果.代码很简单,效果很震撼: 代码实现 html: <divclass="demo demo1">3d text effect&l ...
- 小程序定制,挑战百日学习计划第31天(3D骰子制作)
南宁创业小公司 专业做小程序开发 定制 www.zkelm.com 本来只是想学一下flex得排版, 但是因为学了不理解,所以就跟着做一个骰子, 做了骰子就像让骰子动起来, 动起来了, 感觉为什么不是 ...
- HTML5七夕情人节表白网页制作【一箭穿心动画css3代码】HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
- 纯CSS3制作炫酷的3D相册
纯CSS3制作炫酷的3D相册 整体效果如下所示: 整体代码如下所示: html中的代码 <!DOCTYPE html> <html lang="en"> & ...
- html5 鼠标旋转动画效果,CSS3鼠标滑过图片3D翻转动画特效
这是一款效果非常炫酷的CSS3鼠标滑过图片3D翻转动画特效.该特效基于Bootstrap网格系统来布局,通过简单的CSS3代码,在鼠标滑过图片时对图片进行3D翻转,效果非常的酷. 使用方法 HTML结 ...
最新文章
- 《Swift开发实战》——第16章,第16.2节下标脚本用法
- Flutter入门三部曲(3) - 数据传递/状态管理 | 掘金技术征文
- PAT (Basic Level) 1039 到底买不买(模拟)
- java模拟servlet_Java应用程序模拟向Servlet发送POST请求
- TechEd2010
- 最简易上手的numpy学习笔记二
- Javascipt超详细版思维导图+基础语法导航
- JavaScript 数字前补“0”的五种方法
- SSM整合(二)(mybatis逆向工程)
- Bert和一些以Bert为基础的预训练模型的Mask区别
- 我也是不得不说我的学习能力下降了,这两天都没有完成一个模块
- java 最大子段和问题,最大连续子数组和(最大子段和)
- mkv格式怎么转换成mp4?
- 设计一个H5编辑器的数据模型和核心功能
- SSR(服务端渲染)
- pos打印机指令java,如何从Delphi向POS打印机发送控制命令
- android 跑马灯 竖线,专为电竞和内容创作者而生!体验惠普 ENVY TE01台式机
- 【Keil编译警告】warning C316:unterminated conditionals
- 中国34个省市 按字母排序 uniapp城市列表
- https怎么防止流量劫持