CSS3(3D骰子)

最新推荐文章于 2022-03-15 15:26:00 发布
最新推荐文章于 2022-03-15 15:26:00 发布
阅读量120 收藏 1
点赞数
原文链接：http://www.cnblogs.com/YoogaChan/p/6964720.html
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3(3D骰子)</title>
    <style>
        *{padding: 0px;margin: 0px;}
        #container{
            width: 500px;
            height: 500px;
            border:1px solid red;

            perspective:800px;
            margin: 0 auto;

        }
        #wrap{
            width: 100px;
            height: 100px;
            position: relative;

            top:50%;
            left: 50%;
            margin-top:-50px;
            margin-left:-50px;

            transform-style:preserve-3d;

        }
        li{
            list-style:none;
            width: 100px;
            height: 100px;
            position: absolute;
            text-align: center;
            line-height: 100px;
            color: white;
            font-size: 36px;


        }
        li:nth-of-type(1){
            background: green;
            top:-100px;
            left: 0px;
            transform: rotateX(-90deg);
            transform-origin: bottom;

        }
        li:nth-of-type(2){
            background:blue;
            top:0px;
            left: -100px;
            transform: rotateY(90deg);
            transform-origin: right;

        }
        li:nth-of-type(3){
            background:gray;
            top:0px;
            left: 0px;
            transform: translateZ(0px);

        }
        li:nth-of-type(4){
            background:orange;
            top:0px;
            left: 100px;
            transform: rotateY(-90deg);
            transform-origin: left;

        }
        li:nth-of-type(5){
            background:black;
            top:100px;
            left: 0px;
            transform: rotateX(90deg);
            transform-origin: top;


        }
        li:nth-of-type(6){
            background:#3194EF;
            top:0px;
            left: 0px;

            transform: translateZ(100px);

        }

        #container:hover #wrap{

            transform: rotateX(600deg) rotateY(600deg);
            -webkit-transform: rotateX(600deg) rotateY(600deg);
            transition: transform 5s;
        }

    </style>
</head>
<body>

<div id="container"><!-- 舞台 -->

    <div id="wrap"><!-- 容器 -->
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>

    </div>
</div>

</body>
</html>

转载于:https://www.cnblogs.com/YoogaChan/p/6964720.html

dibisha5159
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
运用CSS3制作3D盒子骰子
qq_44544363的博客
05-28 697
运用CSS3制作3D盒子骰子 最近好像CSS3上瘾了，特喜欢找动画效果来练手（空闲时间），这不，我参照人家制作的3D盒子制作了一个骰子，参照链接： https://www.cnblogs.com/dtdxrk/p/4466175.html 3D骰子如下图，由于某种因素掺杂就不放动图了，看一下图版： HTML代码如下，list是骰子点的样式： 我们来看一下骰子平面图，如下图，1和4是这时重叠起来的： CSS代码如下，骰子点的样式我收起来了（因为太多太长了），红色框框的要在写完骰子点后加上让它们折叠成立方
CSS3制作骰子
weixin_45908839的博客
04-23 679
body { perspective: 1000px;/*透视效果必须设置在父元素 因为我下面 父元素要转动 所有写在body里面*/ /* perspective-origin: 50% 50%; 该属性表示沿着哪个方向移动 该属性默认就是50% 50%*/ } .box { width: 100px; ...
css实现一个3D转动的骰子（附GIF效果图）
lovelyGFR的博客
03-15 1769
之前一直对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
酷炫骰子 3d html,CSS3 3D骰子动画
weixin_34505281的博客
06-05 197
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翻转特效.zip
07-04
纯css3实现骰子3D翻转特效是一款自动翻转的3d色子动画效果下载。
CSS+jQuery滚骰子动画
HitTheZone的博客
11-27 6895
css+jquery滚骰子动画
CSS3 3D骰子多角度翻转特效
07-24
本主题将深入探讨“CSS3 3D骰子多角度翻转特效”，这是一种利用CSS3的强大功能创建的互动元素，用户可以通过点击来控制骰子的3D翻转，展示不同的面。 首先，我们来看CSS3中的3D变换。3D变换允许元素在三维空间中...
CSS3 3D骰子翻转旋转动画
05-01
在本文中，我们将深入探讨如何使用CSS3实现一个3D骰子翻转旋转动画的技巧。CSS3作为现代网页设计的重要工具，提供了丰富的样式和动画功能，其中之一就是3D转换，它使得我们可以创建出立体、动态的效果，如本文标题所...
掷骰：使用CSS3动画的简单3D骰子掷骰
01-28
CSS3 Animation提供的简单3D骰子滚动动画制作器。 香草JS 将dist / roll-a-die.js复制到您的库文件夹中将其加载到HTML脚本中 [removed][removed] 您可以使用链接...
js+css3实现3D骰子特效.rar_JS3d滚动_js+css3实现3D骰子特效_骰子
09-24
本文将深入探讨如何使用JavaScript和CSS3来实现一个3D骰子的特效，具体涉及到的知识点包括： 1. **CSS3 3D变换**： CSS3的3D变换功能允许开发者创建具有立体感的元素。通过`transform`属性，我们可以对元素进行...
摇色子动画页面
09-29
抽奖类的h5活动页面开发
摇骰子跳一跳
03-18
摇骰子跳一跳.zip
H5 +Jquery 扔骰子 色子动画变化 控制点数
08-17
HTML5 +Jquery 扔骰子 色子动画变化 控制点数 简单案例，网站找了好久都没有找到类似源码，结合网上资料做了个
Flash源文件 掷骰子比大小小游戏
07-11
这是一个猜大小的小游戏，11点以下为小，以上为大，三个相同为豹子。
CSS3制作3D骰子旋转动画特效
06-24
在本教程中，我们将深入探讨如何使用CSS3创建一个3D骰子旋转动画特效，这是一种交互式的视觉效果，用户可以通过鼠标移动来控制正方体的旋转。CSS3是层叠样式表的最新版本，它引入了许多强大的新特性，包括3D变换和...
运用css3 实现骰子3d旋转效果
小菜鸟的博客
05-04 6778
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 5180
闲暇之余看了一些关于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骰子
weixin_30539835的博客
08-10 409
z zz zz zzzz zzzzz zzzzzz 转载于:https://www.cnblogs.com/hubj/p/3885950.html
css3摇骰子,css3实现掷骰子（无图）
weixin_42144707的博客
08-03 925
抽奖或游戏之类的动画很多时候用到掷骰子，一般采用gif图片格式实现动画效果。gif图片占内存较大，用户体验不好，下面用css3实现的掷骰子效果，骰子点数、面和转动效果都是有css，css3完成的。截图gif图如下：骰子.gif；这个特么的有点快啊动态图；打开可见效果：链接网页http://htmlpreview.github.io/?https://github.com/buwu/simple/b...
css 骰子布局九点
最新发布
05-19
CSS 骰子布局是一种基于 CSS3 transform 实现的 3D 布局方式，可以实现立体感的效果。其中九点布局指的是将一个立方体分为九个部分，每个部分都是一个平面，可以在每个部分上放置不同的内容。 具体实现方法是利用 transform-style: preserve-3d 属性将父级元素变为 3D 空间，然后使用 transform 属性对子元素进行变换，使其呈现立体感。而九点布局则是通过设置子元素的 translate3d 属性实现的。 以下是九点布局的具体实现步骤： 1. 将立方体的每个面拆成两个三角形 2. 使用 transform-style: preserve-3d 将父级元素变为 3D 空间 3. 对于每个三角形，设置其 transform-origin 属性，使其旋转中心在三角形的中心位置 4. 对于每个三角形，使用 transform 属性设置其旋转角度和位置 5. 对于立方体的每个面，使用 translate3d 属性设置其位置
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值