3D骰子

最新推荐文章于 2023-01-30 22:04:34 发布
最新推荐文章于 2023-01-30 22:04:34 发布
阅读量302 收藏
点赞数
文章标签： CSS3 3D骰子 3D筛子
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44038355/article/details/84943999
版权

CSS3 制作3D骰子

html:
<body>
<div id="box">
    <div class="box2">
        <div>上</div>
        <div>下</div>
        <div>左</div>
        <div>右</div>
        <div>前</div>
        <div>后</div>
    </div>
</div>
</body>
style:
<style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        /*html,body{
            overflow: hidden;
            height: 100%;
        }*/
        #box{
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            width: 300px;
            height: 300px;
            border: 1px solid;

            /*景深(数值越大，越不明显)*/
            perspective: 2000px;
        }
        #box > .box2{
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            width: 200px;
            height: 200px;

            /*动画时长*/
            transition: 3s;

            /*开启3D*/
            transform-style: preserve-3d;
            /*定位基点：(x,y,length)*/
            transform-origin: center center -100px;
        }
        #box > .box2 div{
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: rgba(111,111,111,.8);
            font: 80px/200px "微软雅黑";
            text-align: center;

            /*影藏背面*/
            backface-visibility: hidden;
        }
        #box > .box2 > div:nth-child(1){
            top: -200px;
            transform-origin: bottom;
            transform: rotateX(90deg);
        }
        #box > .box2 > div:nth-child(2){
            top: 200px;
            transform-origin: top;
            transform: rotateX(-90deg);
        }
        #box > .box2 > div:nth-child(3){
            left: -200px;
            transform-origin: right;
            transform: rotateY(-90deg);
        }
        #box > .box2 > div:nth-child(4){
            left: 200px;
            transform-origin: left;
            transform: rotateY(90deg);
        }
        #box > .box2 > div:nth-child(5){
            /*‘前’面不用处理*/
            /*z-index: 1;*/
        }
        #box > .box2 > div:nth-child(6){
            /*‘后’面向Z轴向里面去200px*/
            transform: translateZ(-200px) rotateX(180deg);
        }
        #box:hover .box2{
            /*旋转父元素box2
             *三个参数(X,Y,Z)轴，再加上一个旋转的度数
             * */
            transform: rotate3d(3,2,1,360deg);
        }
    </style>
阿布的小布
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
3D骰子模型
weixin_44543412的博客
02-21 1546
3D骰子模型 开发工具与关键技术：前端 作者：盘子 撰写时间：2019年1月9日 Css3动画不但在原来的基础上新增了变形和动画相关属性，而且通过这些属性更简便的实现想要的动画效果，给我们带来很大的简便。Css3提供两个主要的动画——transition动画和animation动画，而这两个动画里又有多个不同属性，每个不同相关属性都有其不同的实现效果。现在来看下面用一个小案例讲讲transitio...
酷炫骰子 3d html,CSS3 3D骰子动画
weixin_34505281的博客
06-05 188
CSS语言：CSSSCSS确定main {width: 100vw;height: 100vh;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: ce...
CSS3 3D骰子
weixin_30539835的博客
08-10 402
z zz zz zzzz zzzzz zzzzzz 转载于:https://www.cnblogs.com/hubj/p/3885950.html
骰子3D模型设计
01-01
骰子3D模型设计适用于生活用品模型设计
立体骰子实现3D炫酷旋转效果（附完整源码）（附动画代码）
qq_46034942的博客
02-12 2957
整体思路：首先搭建骰子整体的立方体 1.先搭建前后两个面(front和back)，通过定位（子绝父相）将两个盒子定位在立方体正面，此时一面遮挡了另一面，在父盒子中添加transform-style: preserve-3d;达到3d立体效果，将前盒子沿z轴正方向移动高一半距离，后盒子沿z轴负方向移动高一半距离，前后盒子搭建完成，可搭配hover和过渡查看效果； 2.左右盒子与步骤1类似，不过左右盒子是需要进行左右移动高一半距离，且需要绕Z轴转动； 3.与左右盒子搭建类似，需要绕X轴转动，需要沿Y轴上下
JS实现简单随机3D骰子
10-16
在JavaScript中实现一个3D骰子的动画效果，主要涉及到CSS3的3D变换和JavaScript事件处理。这个项目旨在创建一个交互式的3D骰子，当用户点击按钮时，骰子会随机滚动到一个数字面朝上。以下是实现这一功能的关键步骤和...
CSS3制作3D骰子旋转动画特效
06-24
在本教程中，我们将深入探讨如何使用CSS3创建一个3D骰子旋转动画特效，这是一种交互式的视觉效果，用户可以通过鼠标移动来控制正方体的旋转。CSS3是层叠样式表的最新版本，它引入了许多强大的新特性，包括3D变换和...
CSS3 3D骰子翻转旋转动画
05-01
在本文中，我们将深入探讨如何使用CSS3实现一个3D骰子翻转旋转动画的技巧。CSS3作为现代网页设计的重要工具，提供了丰富的样式和动画功能，其中之一就是3D转换，它使得我们可以创建出立体、动态的效果，如本文标题所...
js+css3实现3D骰子特效特效代码
03-20
【标题】"js+css3实现3D骰子特效特效代码"主要涵盖了JavaScript和CSS3在Web前端开发中的应用，特别是涉及到3D图形渲染和动态效果的创建。在这个项目中，开发者利用这两种技术来模拟一个3D骰子的翻转和滚动动画，以...
CSS-3D之制作3D骰子
freesky的专栏
09-16 2137
CSS-3D之制作3D骰子 css3 3d其实还是转换的一种，css3提供了2D转换，里面有位移、缩放、旋转、斜拉，这些个效果都是在2d平面上的效果。那么3d其实就是多了一个维度，也就是多了个坐标轴。 页面中想做3d效果就需要一个东西，就是盛放3d变换的元素的容器，咱们把它叫做舞台，在stage的css加上transform-style: preserve-3d      可以不写哦（默认会判
掷骰：使用CSS3动画的简单3D骰子掷骰
01-28
掷骰子 CSS3 Animation提供的简单3D骰子滚动动画制作器。 香草JS 将dist / roll-a-die.js复制到您的库文件夹中将其加载到HTML脚本中 [removed][removed] 您可以使用链接https://unpkg.com/roll-a-die@1.3.0/dist/roll-a-die.js 。 切记将包裹号更新为最新的。 调用带有其选项的方法。 rollADie({ element, numberOfDice: 2, callback}); 使用npm（和CommonJS构建器） 使用npm安装。 npm install --save roll-a-die 用纱安装。 yarn add roll-a-die 导入图书馆 ES5 const rollADie = require('roll-a-die'); ES6 import rollADie from 'roll-a-die'; 调用方法 rollADie({ element,
骰子css3_3D自转-模板
07-10
好看的css3 六图骰子旋转模板，鼠标悬停动作--暂停--开始--，内涵html,css,js
学习3dmax对象的布尔运算 - 做一个骰子
bcbobo21cn的专栏
01-30 765
3dmax 对象的布尔运算；
2021-06-20 Ai3D筛子
xiaoxindelb的博客
06-20 183
Ai3D筛子 如何在ai中把一个普通的平面筛子做成一个有立体感的3D筛子呢。我们先看原图。 今天我就来教教大家如何做一个带有3D效果的筛子。 1.打开建立一块画布，然后我们用椭圆工具画一个高为283和宽为283的圆并复制6个，然后我们在填上一个个小白圆【颜色可以把我这张原图拉进去然后吸取】照着他做。 2.接下来我们需要把我们做好的6个筛子圆放进符号里，在后面的3D操作中需要用到，我们在属性栏里找到窗口里的符号，我们点击，他会出来一个小方框而我们则需要把6个椭圆拉进去（注意一个一个拉）然后如下
CSS3技术完成骰子动画
qq_45129779的博客
11-30 340
CSS3动画 - 完成好玩的骰子动画效果 - 提升对编程的开发兴趣
利用css做一个立体的骰子模型
m0_49266584的博客
10-17 765
利用css做一个立体的骰子模型 今天是学前端的第3个星期，一般我们用css写的东西都是平面的或者说，给我们的感觉是2D的，那我们今天来做一个3D的骰子模型。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS(3D骰子)</title> <style> *{ pad
3D筛子教程
lzm204442535的博客
06-09 632
3D筛子教程 先打开AI，新建一张画布(大小不限)找到矩形工具点击一下画布，弹出一个框，写着宽和高度，两个都是“10”不然做不了，点击确定就出现了一个很小的正方形，它的颜色是（C10011），接着在效果里找到（3D）点击凹出和斜面，先在预览那打个勾勾，参数如图下。 做完这一步之后点击确定，找到椭圆工具再点击一下空白画布宽高还是“10”还是一样的颜色不一样的是我们要给筛子加里面的圆，凭着感觉来拉，...
立体3D筛子
Likeyou113的博客
06-27 292
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术：AI与3D调节 作者：神威未得偏爱 撰写时间：2021年6月27日 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 一、画布 1.在AI里随机创建一个画布（个人用300mmx30
3D筛子制作教程
TZLNBB的博客
05-27 799
3D筛子制作教程 1.如何用AI制作筛子 先打开AI创建空白文档然后创建六个同样大小的椭圆 然后在像筛子一样做六个面如图： 做好后在菜单栏—找到窗口—窗口下找到符号把这六个给在符号里面 2.画一个和椭圆一样大的正方形.找菜单栏然后—效果—3D—凸出和斜角 然后点贴图找到自己添加的符号按顺序1到6的贴好就会这样 然后点扩展外观，把那些编组都拆开，找到那三个正方形背景选中合并然后置于底层那三个椭圆就显示出来了. 选中那个背景然后用直接选择...
写出Android OpenGL ES实现3D抛骰子
最新发布
05-27
好的，下面是一个简单的Android OpenGL ES实现3D抛骰子的示例代码： 首先在build.gradle中添加OpenGL ES依赖： ```groovy implementation 'com.android.support:support-v4:28.0.0' implementation '...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值