css 3D立体动画效果怎么转这个骰子才能看到5

这篇具有很好参考价值的文章主要介绍了css 3D立体动画效果怎么转这个骰子才能看到5。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

css 3D立体动画效果怎么转这个骰子才能看到5

css 3D立体动画效果怎么转这个骰子才能看到5,css,3d,前端 

css 3D立体动画效果怎么转这个骰子才能看到5,css,3d,前端文章来源地址https://www.toymoban.com/news/detail-796916.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>3D效果认知:使用transform实现3D立方体</title>
    <style>
        * {
            margin: 0 auto;
            padding: 0;
        }

        body {
            background: #fffdfd;
        }

        h1 {
            text-align: center;
            color: #c16f6f;
        }

        pre {
            background-size: 800px 400px;
            padding: 20px;
            /* 文字大小 */
            font-size: 18px;
        }

        .wrap {
            background-image: url('xyz.png');
            background-repeat: no-repeat;
            background-size: 400px 200px;
            margin-top: 100px;
            perspective: 800px;
            perspective-origin: 50% 100px;
        }

        .cube {
            /* animation: move 10s linear infinite; */
            margin: 0 auto;
            position: relative;
            width: 200px;
            height: 200px;
            color: #fff;
            line-height: 200px;
            font-size: 10rem;
            text-align: center;
            transform-style: preserve-3d;
            -webkit-user-select: none;
            -moz-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .cube div {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: #d82929;
            opacity: 0.9;
            color: #e1e6d4;
            text-shadow:
                2px 2px 2px #ddd,
                4px 4px 2px #bbb,
                6px 6px 2px #999,
                8px 8px 2px #777,
                10px 10px 2px #555,
                12px 12px 2px #333,
                14px 14px 2px #111;
        }

        .front {
            -webkit-transform: translateZ(100px);
            -moz-transform: translateZ(100px);
            -o-transform: translateZ(100px);
            -ms-transform: translateZ(100px);
            transform: translateZ(100px);
        }

        .back {
            -webkit-transform: translateZ(-100px) rotateY(180deg);
            -moz-transform: translateZ(-100px) rotateY(180deg);
            -o-transform: translateZ(-100px) rotateY(180deg);
            -ms-transform: translateZ(-100px) rotateY(180deg);
            transform: translateZ(-100px) rotateY(180deg);
        }

        .left {
            -webkit-transform: translateX(-100px) rotateY(90deg);
            -moz-transform: translateX(-100px) rotateY(90deg);
            -o-transform: translateX(-100px) rotateY(90deg);
            -ms-transform: translateX(-100px) rotateY(90deg);
            transform: translateX(-100px) rotateY(90deg);
        }

        .right {
            -webkit-transform: translateX(100px) rotateY(-90deg);
            -moz-transform: translateX(100px) rotateY(-90deg);
            -o-transform: translateX(100px) rotateY(-90deg);
            -ms-transform: translateX(100px) rotateY(-90deg);
            transform: translateX(100px) rotateY(-90deg);
        }

        .top {
            -webkit-transform: translateY(-100px) rotateX(90deg);
            -moz-transform: translateY(-100px) rotateX(90deg);
            -o-transform: translateY(-100px) rotateX(90deg);
            -ms-transform: translateY(-100px) rotateX(90deg);
            transform: translateY(-100px) rotateX(90deg);
        }

        .bottom {
            -webkit-transform: translateY(100px) rotateX(-90deg);
            -moz-transform: translateY(100px) rotateX(-90deg);
            -o-transform: translateY(100px) rotateX(-90deg);
            -ms-transform: translateY(100px) rotateX(-90deg);
            transform: translateY(100px) rotateX(-90deg);
        }

        /* ---------------------------------------------------------- */
        @keyframes move {
            from {
                transform: rotateY(0deg) rotateZ(0deg);
            }

            to {
                transform: rotateY(360deg) rotateZ(360deg);
            }
        }

        /* -------------------------------------------------------- */
        pre+div+div {
            width: 400px;
            height: 400px;
            display: flex;
            justify-content: center;
            align-items: center;
            top: 100px;
            left: 1000px;
            position: absolute;
        }

        main {
            width: 200px;
            height: 200px;
            display: flex;
            transform-style: preserve-3d;
            animation: move 5s linear infinite;
        }

        main div {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: #edeff0;
            box-shadow: 0 0 10px #dfc3c3;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }

        main div span {
            width: 50px;
            height: 50px;
            background-color: #f70a0a;
            border-radius: 50%;
            box-shadow: inset 0 4px 10px #fc6114, inset 0 4px 10px #51372cea;
        }

        main div:first-child {
            transform: translateZ(100px);
        }

        main div:nth-child(2) {
            transform: rotateY(90deg) translateZ(100px);
            flex-direction: column;
            justify-content: space-around;
        }

        main div:nth-child(3) {
            transform: rotateY(270deg) translateZ(100px);
            padding: 20px;
            box-sizing: border-box;
        }

        main div:nth-child(3) span:nth-child(1) {
            align-self: flex-start;
        }

        main div:nth-child(3) span:nth-child(3) {
            align-self: flex-end;
        }

        nav {
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: space-around;
        }

        main div:nth-child(4) {
            transform: rotateY(180deg) translateZ(100px);
        }

        main div:nth-child(5) {
            transform: rotateX(90deg) translateZ(100px);
        }

        main div:nth-child(6) {
            transform: rotateX(270deg) translateZ(100px);
        }
    </style>
</head>

<body>
    <h1>3D效果</h1>
    <pre>
        transform 属性的值
            translate(x,y)、translateX(x)、translateY(y)、translateZ(z)、translate3d(x,y,z) 定义位置的移动距离
            scale(x,y)、scaleX(x)、scaleY(y)、scaleZ(z)、scale3d(x,yz) 定义元素的缩放比例
            rotate(angle)、rotateX(angle)、rotateY(angle)、rotateZ(angle)、rotate3d(x,y,z,angle) 定义元素的旋转度
            skew(x-angle,y-angle)、skewX(angle)、skewY(angle) 定义元素的倾斜度                     
        perspective 属性
              该属性用于激活一个3D空间,其子元素都会获得透明效果,一般 perspective 属性用于父元素。
            取值为 none 或 不设置,则为不激活3D空间
            取值越小,3D效果越明显,建议取值为元素的宽度
        transform-origin 属性
              用来改变元素原点的位置,取值:
            center 默认值 等价于( center center / 50% 50%)
            top/right/bottom/left
            transform-origin : x y z
</pre>
    <div class="wrap">
        <div class="cube">
            <div class="front">前</div>
            <div class="back">后</div>
            <div class="left">左</div>
            <div class="right">右</div>
            <div class="top">上</div>
            <div class="bottom">下</div>
        </div>
    </div>
    <!------------------------------------------------------ -->
    <div>
        <main>
            <div>
                <span></span>
            </div>
            <div><span></span>
                <span></span>
            </div>
            <div>
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div>
                <nav><span></span>
                    <span></span>
                </nav>
                <nav><span></span>
                    <span></span>
                </nav>
            </div>
            <div>
                <nav><span></span>
                    <span></span>
                </nav>
                <nav><span></span>
                </nav>
                <nav><span></span>
                    <span></span>
                </nav>
            </div>
            <div>
                <nav><span></span>
                    <span></span>
                </nav>
                <nav><span></span>
                    <span></span>
                </nav>
                <nav><span></span>
                    <span></span>
                </nav>
            </div>
        </main>
    </div>
    <script>
        var mouseDown = false;
        var mousePoint = { x: 0, y: 0 };
        var cubeRotate = { x: 0, y: 0 };
        window.onload = function () {
            document.onmousedown = function (e) {
                mouseDown = true;
                mousePoint.x = e.pageX;
                mousePoint.y = e.pageY;
            }
            document.onmousemove = function (e) {
                if (mouseDown) {
                    let x = e.pageX - mousePoint.x;
                    let y = e.pageY - mousePoint.y;
                    cubeRotate.x += x / 30;
                    cubeRotate.y += y / 30;
                    document.querySelector('.cube').style = `transition:linear;transform:rotateX(${cubeRotate.x}deg) rotateY(${cubeRotate.y}deg)`;
                }
            }
            document.onmouseup = function (e) {
                mouseDown = false;
            }
        }
    </script>
</body>

</html>

到了这里,关于css 3D立体动画效果怎么转这个骰子才能看到5的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【CSS笔记】CSS动画效果(2d、3d)之渐变色、过渡、变换、平移、缩放、旋转、倾斜、关键帧动画

    这篇文章,主要介绍CSS动画效果(2d、3d)之渐变色、过渡、变换、平移、缩放、旋转、倾斜、关键帧动画。 目录 一、2d动画 1.1、渐变色 (1)线性渐变色 (2)径向渐变色

    2024年02月02日
    浏览(93)
  • css有哪些动画效果怎么实现的

     css常见的动画效果:平移,缩放,旋转 css实现动画主要有三种方式: transition实现渐变动画 transform实现缩放平移效果动画 animation实现自定义动画   transition实现渐变动画 transform实现缩放平移效果动画  animation实现自定义动画  属性 描述 属性值 animation-name 动画名称 animat

    2024年02月09日
    浏览(49)
  • 前端css/less绕椭圆轨道旋转动画 带遮挡效果 3D

    效果如图,多个物体在轨道上绕中心物体旋转,当旋转到物体后面时将被遮挡。主要使用css实现,为了简化代码,引入less进行处理。 本质上是使用动画控制轨道带动内部的物体进行旋转,计算出每个物体在椭圆轨道上的位置,使用绝对定位放置物体。由于轨道上物体有多个

    2024年02月03日
    浏览(92)
  • CSS3 立体 3D 变换

    个人主页: 学习前端的小z 个人专栏: HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结,欢迎大家在评论区交流讨论! 什么是3D的场景呢?2D场景,在屏幕水平和垂直的交叉轴线x轴和y轴。 3D场景,在垂直于屏幕的方法,相对于3D多出个Z轴。 Z轴

    2024年04月15日
    浏览(39)
  • Python pyglet 自制3D引擎入门(二) -- 绘制立体心形,动画和相机控制

    Python作为目前较广泛的编程语言, 用于制作3D游戏可谓得心应手。本文讲解使用Python pyglet库自制简易3D引擎的方法技巧。 上篇:Python pyglet 自制3D引擎入门(一) – 绘制几何体、创建3D场景 先放效果图: pyglet.window 部分用于实现窗口操作, pyglet.gl 以及 pyglet.gl.glu 模块包含了OpenGL的

    2024年02月10日
    浏览(41)
  • vue3 echarts实现3D立体柱状图效果,多柱状图

    使用插件vchart+echarts5.x按需引入实现 需要注意下,底下的椭圆,是在柱子底下“透”出来,颜色应该暗一点,才能视觉上看着有立体感。 成品,还原了大部分设计效果

    2024年02月06日
    浏览(44)
  • 怎么使用树莓派总要了解一点它的软硬件吧。什么模块有什么用,需要什么准备才能安全的看到树莓派的开机界面

    Raspberry Pi(中文名为“树莓派”,简写为 RPi,(或者 RasPi / RPI)只有信用卡大小的微型电脑, 其系统基于 Linux 。随着 Windows 10 IoT 的发布,我们 也将可以用上运行 Windows IoT 的树莓派 。别看其外表“娇小”,内“心”却很强大,视频、音频等功能通通皆有,可谓是“麻雀虽小,五

    2024年02月06日
    浏览(45)
  • 深入浅出理解CSS中的3D变换:踏上立体视觉之旅

    在现代Web设计中,CSS 3D变换已经成为增强用户体验、打造沉浸式界面的重要手段。借助CSS的3D变换属性,我们可以轻松实现元素在三维空间中的旋转、移动、缩放等操作,从而创造出生动活泼、富有立体感的网页效果。本文将从基础知识出发,通过易于理解的概念解析和实战

    2024年04月22日
    浏览(47)
  • 关于Uniapp开发h5怎么直接在手机上看到效果,不需要模拟器和发布。

    首先将手机和电脑连接同一个网络(这里以电脑连接手机热点为例) 将项目运行,运行后编辑器会输出两个地址,一个是http://localhost/前缀的,一个是以你本机ip地址(network)为前缀的. 现在复制以ip地址为前缀的那个地址. 将地址发送到手机,在手机浏览器上访问即可.效果同步刷新

    2024年02月09日
    浏览(41)
  • css-动画效果学习示例

    阴影 x-轴   y-轴   模糊度  颜色   (正负值可以表示角度问题)  可以加多个阴影 内置阴影 transition  可以添加动画延迟效果 向z轴缩进,开启透视respective 触发旋转效果 学习来源 :动画属性_哔哩哔哩_bilibili

    2024年01月19日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包