纯CSS 实现旋转的骰子

于 2021-06-22 21:42:45 发布
阅读量528 收藏
点赞数
分类专栏： 前端 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24655857/article/details/118118393
版权

纯CSS 实现旋转的骰子
效果图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旋转的骰子</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            transform: perspective(1000px);
        {#transform-style: preserve-3d;#}
        }

        .box ul {
            transform-style: preserve-3d;
            animation: go 12s linear infinite backwards;
        {#transform: rotateY(45deg) rotateX(45deg) rotateZ(45deg);#}

        }

        ul, li {
            list-style: none;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            text-align: center;
            line-height: 200px;
            font-size: 70px;
        }

        .box {
            width: 200px;
            height: 200px;
            position: relative;
            margin: 200px auto;
            transform-style: preserve-3d;
        }


        ul li {
            color: #ffffff;
            border-radius: 30px;
            font-weight: 700;

        }

        ul li:nth-child(1) {
            transform: rotate3d(0, 0, 0, 0deg) translateZ(100px);
            background-color: rgba(255, 0, 0, 0.8);
        }

        ul li:nth-child(2) {
            transform: rotateY(-90deg) translateZ(-100px);
            background-color: rgba(0, 255, 0, 0.8);
        }

        ul li:nth-child(3) {
            transform: rotate3d(0, 0, 0, 0deg) translateZ(-100px);
            background-color: rgba(0, 0, 255, 0.8);
        }

        ul li:nth-child(4) {
            transform: rotateY(90deg) translateZ(-100px);
            background-color: rgba(123, 13, 123, 0.8);
        }

        ul li:nth-child(5) {
            transform: rotateX(-90deg) translateZ(100px);
            background-color: rgba(23, 130, 225, 0.8);
        }

        ul li:nth-child(6) {
            transform: rotateX(-90deg) translateZ(-100px);
            background-color: rgba(252, 0, 123, 0.8);
        }

        @keyframes go {
            0% {
                transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            }
            100% {
                transform: rotateX(720deg) rotateY(720deg) rotateZ(720deg);
            }
        }
    </style>
</head>
<body>
<div class="box">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>

</body>
</html>
知己知彼而已
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2.旋转的骰子（1）
konglingbin66的专栏
11-20 1227
使用纯CSS实现旋转骰子动画
css实现一个3D转动的骰子（附GIF效果图）
lovelyGFR的博客
03-15 1757
之前一直对css动画和过渡这块写的少，今天那一个转动的骰子来练练手 代码块 ： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, in
用css3transform做出3D旋转的骰子
sdfujichao的博客
07-08 3610
这个效果利用了3D旋转平移，主要的注意点是当一个面旋转以后他的xyz轴还得按照以前的xyz轴来做，他的xyz轴并不是开始时吧的xyz轴的方向，他的xyz轴也同时受到了旋转的影响而发生改变。所以可以先平移然后在旋转。 .wrap{perspective: 1000px; width: 1000px; height: 600px; margin: 0 auto
运用css3 实现骰子3d旋转效果
小菜鸟的博客
05-04 6776
css部分代码： .dice_box { width: 400px; height: 400px; position:relative; margin:0 auto; perspective: 900px; -moz-perspective: 900px; -webkit-perspective: 900px; perspective-origin: 50%, 50%; -m
纯CSS3制作骰子3D旋转动画效果
crippty的博客
03-18 5178
闲暇之余看了一些关于CSS3的3D动画方面的文章，自己写了一个3D骰子旋转动画效果，代码分享给大家。先直接上效果图：1.首先创建一个div用来装骰子（手动滑稽）&lt;div class="stage"&gt;&lt;div class="club&gt;&lt;div class="front"&gt;&lt;/div&gt;
纯css3实现骰子3D翻转特效特效代码
03-20
本项目“纯css3实现骰子3D翻转特效特效代码”旨在利用CSS3的特性来创建一个自动翻转的3D骰子动画效果。下面将详细介绍这个项目涉及的关键知识点和实现步骤。 首先，CSS3中的3D转换是核心概念之一。3D转换允许开发者...
纯css3实现骰子3D翻转特效.zip
07-04
【纯CSS3实现骰子3D翻转特效】 在网页设计和开发中，CSS3（层叠样式表第三版）的出现为创建丰富的交互式用户体验提供了强大的工具。本资源“纯css3实现骰子3D翻转特效.zip”提供了一个使用CSS3实现的3D骰子翻转动画...
纯css3实现骰子3D翻转特效源码.zip
11-09
在本资源中，我们关注的是一个使用纯CSS3实现的骰子3D翻转特效的前端代码示例。这个zip文件包含了一个名为"132687042029825844"的文件，可能是HTML、CSS或者JavaScript文件，用于展示这个特效的实际代码。下面我们将...
CSS3 3D骰子翻转旋转动画
05-01
在本文中，我们将深入探讨如何使用CSS3实现一个3D骰子翻转旋转动画的技巧。CSS3作为现代网页设计的重要工具，提供了丰富的样式和动画功能，其中之一就是3D转换，它使得我们可以创建出立体、动态的效果，如本文标题所...
纯css写一个3d的旋转着的骰子
qq_40710210的博客
04-03 517
用单纯的css实现旋转 html代码： <body> <div id="wrapper"> <div id="group"> <div class="page" id="page1"><span></span></div> <div cl...
Javascrip家务骰子，掷骰子游戏DIV+CSS
05-12
摘要:脚本资源,Ajax/JavaScript,家务骰子,掷骰子　　一个JavaScript版网页小游戏源码，js版家务骰子DIV+CSS源码下载：DIV+CSS+Javascript所编写，指定摇晃次数，随机选择人物和事件，界面美观大方，模拟芒果手机瓷砖块的界面，动态加载事件，有动画效果（小部分功能不支持IE6）。骰子游戏操作方法：直接点击开始，系统直接进行随机筛选 点击[停]就可以得到结果，最上面是[要做的事]下面宽度长的一个[做事的人]，也可以输入一个大于1的数字，系统摇晃到你输入的次数后自动停止，得到结果。
js+css3实现3D骰子特效特效代码
03-20
掷骰：使用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,
21点（HTML+CSS+JS）.zip
03-09
21点游戏！！！！HTML+CSS+JS实现！！！ 21点游戏！！！！HTML+CSS+JS实现！！！ 21点游戏！！！！HTML+CSS+JS实现！！！ 21点游戏！！！！HTML+CSS+JS实现！！！ 21点游戏！！！！HTML+CSS+JS实现！！！ 21点游戏！！！！HTML+CSS+JS实现！！！ 21点游戏！！！！HTML+CSS+JS实现！！！
掷骰子 js（骰子翻转）
01-19
简单的摇色子效果，运用js图片的翻转效果实现。
自动旋转的骰子代码html,JS实现骰子3D旋转效果
weixin_35895056的博客
05-30 775
本文实例为大家分享了JS实现骰子3D旋转效果展示的具体代码，供大家参考，具体内容如下css部分代码：.dice_box {width: 400px;height: 400px;position:relative;margin:0 auto;perspective: 900px;-moz-perspective: 900px;-webkit-perspective: 900px;perspectiv...
html+css3实现骰子
weixin_34187822的博客
08-11 749
1、效果 2、html代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>dice game</title> <link rel="stylesheet" type="text/css" h...
模拟掷骰子的一个小程序.exe
05-18
掷骰子小程序，利用C语言随机数生成函数，产生的随机数，模拟掷骰子随机出现的1-6数字，直接可以运行的小程序。
css3中的旋转筛子的制作二
等待のL先森的博客
12-05 290
**注：把筛子拼成一个的原理就是运了position原理，在筛子面的外面来个父元素，给其定位相对定位，在把每面筛子都旋转好方位，移动，之后通过给每面筛子面添加绝对定位，使其拼接成一个完整的筛子；**
html css做骰子,纯 CSS 制作摇骰子（随机结果）
最新发布
05-25
好的，以下是一个简单的纯CSS制作摇骰子的例子： HTML代码： ``` <div class="dice-container"> <div class="dice"> <div class="face front"></div> <div class="face back"></div> <div class="face top"></div> <div class="face bottom"></div> <div class="face left"></div> <div class="face right"></div> </div> </div> <button onclick="rollDice()">Roll Dice</button> ``` CSS代码： ``` .dice-container { width: 100px; height: 100px; position: relative; } .dice { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; transition: transform 1s ease-in-out; } .face { position: absolute; width: 100%; height: 100%; border: 1px solid black; box-sizing: border-box; } .front { transform: translateZ(50px); } .back { transform: rotateX(180deg) translateZ(50px); } .top { transform: rotateX(-90deg) translateZ(50px); } .bottom { transform: rotateX(90deg) translateZ(50px); } .left { transform: rotateY(-90deg) translateZ(50px); } .right { transform: rotateY(90deg) translateZ(50px); } @keyframes roll { 0% { transform: rotateX(0) rotateY(0); } 25% { transform: rotateX(360deg) rotateY(0); } 50% { transform: rotateX(360deg) rotateY(360deg); } 75% { transform: rotateX(0) rotateY(360deg); } 100% { transform: rotateX(0) rotateY(0); } } .roll { animation: roll 2s linear forwards; } ``` JavaScript代码： ``` function rollDice() { var dice = document.querySelector('.dice'); dice.classList.remove('roll'); void dice.offsetWidth; // force reflow dice.classList.add('roll'); } ``` 在这个例子中，我们创建了一个名为`dice-container`的容器，其中包含一个名为`dice`的3D骰子。骰子由6个面组成，每个面都是一个具有不同旋转和位移的绝对定位的元素。我们使用CSS动画来模拟骰子滚动的效果，当点击“Roll Dice”按钮时，我们将`roll`类添加到骰子上，触发动画。最后，我们还使用了`void dice.offsetWidth`来强制重流，以便动画可以每次都正确执行。 您可以通过修改`roll`关键帧来调整动画的速度和效果。同时，您也可以通过更改骰子的样式来创建不同类型的骰子。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值