web基础学习（十一）CSS3之3D六面体动画案例

最新推荐文章于 2023-01-03 09:31:17 发布
最新推荐文章于 2023-01-03 09:31:17 发布
阅读量827 收藏 7
点赞数 1
分类专栏： web基础 web前端 文章标签： 3D动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39043923/article/details/88964579
版权

3D动画中两个知识点：perspective、transform-style

perspective

perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

  • 注释：perspective 属性只影响 3D 转换元素。
transform-style

transform-style 属性规定如何在 3D 空间中显示被嵌套的元素。

flat ：默认,子元素不显示3D位置, 看不到子元素
preserve-3d:子元素显示3D位置

示例展示：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        html, body {
            margin: 0;
            height: 100%;
        }

        body {
            background: linear-gradient(orange, wheat);
        }

        .wrap {
            padding-top: 200px;
            /*设置透视距离,不要太近*/
            perspective: 1000px;
        }

        .cube {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            position: relative;
            /*3D效果下显示下面所有的元素*/
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
            transform: rotateX(-30deg) rotateY(-70deg) rotateZ(0deg);
            animation: cubeRotate 10s linear infinite alternate;
        }

        /*定义包裹元素旋转浏览器兼容模式 Safari 和 Chrome*/
        @-webkit-keyframes cubeRotate {
            from {
                -webkit-transform: rotateX(0deg) rotateY(0deg);
            }
            to {
                -webkit-transform: rotateX(360deg) rotateY(360deg);
            }
        }

        /*定义包裹元素旋转*/
        @keyframes cubeRotate {
            from {
                transform: rotateX(0deg) rotateY(0deg);
            }
            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }

        /*定义外层元素综合属性*/
        .cube > div {
            width: 198px;
            height: 198px;
            background-color: rgba(0, 0, 0, 0.3);
            border: 1px solid #ccc;
            font-size: 40px;
            color: #fff;
            text-align: center;
            line-height: 198px;
            position: absolute;
            left: 0;
            top: 0;
            transition: all 0.3s ease;
        }

        /* 外层 元素位置定义,前后左右上下。*/
        .out-front {
            -webkit-transform: translateZ(100px);
            -ms-transform: translateZ(100px);
            -o-transform: translateZ(100px);
            transform: translateZ(100px);
        }

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

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

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

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

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

        /*鼠标经过元素移动位置,前后左右上下*/
        .cube:hover .out-front {
            transform: translateZ(200px);
        }

        .cube:hover .out-back {
            transform: translateZ(-200px) rotateY(180deg);
        }

        .cube:hover .out-left {
            transform: translateX(-200px) rotateY(-90deg);
        }

        .cube:hover .out-right {
            transform: translateX(200px) rotateY(90deg);
        }

        .cube:hover .out-top {
            transform: translateY(-200px) rotateX(90deg);
        }

        .cube:hover .out-bottom {
            transform: translateY(200px) rotateX(-90deg);
        }

        /*定义内层元素综合属性*/
        .cube span {
            display: block;
            width: 98px;
            height: 98px;
            opacity: 0.5;
            background-color: pink;
            border: 1px solid orange;
            position: absolute;
            left: 50px;
            top: 50px;
        }

        /* 内层元素定义位置,前后左右上下 */
        .in-front {
            -webkit-transform: translateZ(50px);
            -ms-transform: translateZ(50px);
            -o-transform: translateZ(50px);
            transform: translateZ(50px);
        }

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

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

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

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

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

        /*同样可以同时定义内层的鼠标经过属性这里大家自行发挥吧*/
    </style>
</head>
<body>
<div class="wrap">
    <div class="cube">
        <div class="out-front">前</div>
        <div class="out-back">后</div>
        <div class="out-left">左</div>
        <div class="out-right">右</div>
        <div class="out-top">顶</div>
        <div class="out-bottom">底</div>
        <span class="in-front"></span>
        <span class="in-back"></span>
        <span class="in-left"></span>
        <span class="in-right"></span>
        <span class="in-top"></span>
        <span class="in-bottom"></span>
    </div>
</div>
</body>
</html>
June.1
关注
专栏目录
[CSS3]制作50个超棒动画效果教程
weixin_34416754的博客
06-16 598
CSS3为我们带来了令人惊叹的新特性，而最有趣的就是CSS动画。今天彬Go向大家推荐这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动。为了能够预览到这些惊人的CSS3技术带来的动画特效，请大家使用如Safari和Chrome这类基于WebKit内核的浏览器。(IE浏览器谢绝观赏~)  您还可以参考以下CSS3相关文章:《5个CSS3技术实现设计增强》《一起感受HTML...
纯css实现3D立体六面体照片墙
fanfan_code的博客
08-17 1148
Html+css;实现3D六面体照片墙，通过使用动画使其能够旋转起来。
CSS-3D动画笔记
diaoweisang7683的博客
05-10 144
3D 在2d的基础上添加 z 轴的变化 3D 位移：在2d的基础上添加 translateZ（），或者使用translate3d（） 　　translateZ（）：以方框中心为原点，变大 3D 缩放：在2d的基础上添加 scaleZ（），或者使用scale3d（） 　　scaleZ（）和 scale3d（）函数单独使用时没有任何效果 3D 透视：perspective 规定...
css3动画3D旋转案例
lucky_girl_girl的博客
02-03 555
1.transform-style:preserve-3d：让子元素在3d空间能占据位置 2.perspective:800px：定位视角，一般800px 在这里插入代码片 <html> <style> body{ perspective:800px; } .stage{ position:relative; width:200px; height:2...
CSS3动画小案例
zuo_zuo_blog的博客
03-31 3266
1气泡效果 原理： a）首先设置多背景图片 background: url(“2.jpg”) no-repeat left top ,url(“2.jpg”) no-repeat right bottom; b） 然后添加变换之后效果 .box:hover{ background-position: left bottom,right top; } c）最后设置过渡 transition: a...
CSS3中的3D和动画
weixin_44269204的博客
04-06 863
3D转换 1.左手坐标系 :伸出左手,让拇指和食指成“L”形,大拇指向右,食指向上,中指指向前方.这样我们就建立了一个左手坐标系,拇指,食指和中指分别代表X、Y、Z 轴的正方向. 2. CSS 中的 3D 坐标系 CSS3 中的 3D 坐标系与上述的 3D 坐标系是有一定区别的,相当于其绕着 X 轴旋转了 180 度. 3.左手法则 左手握住旋转轴,竖起拇指指向旋转轴正方向,正向就是其余手指卷曲...
CSS3实现3D立体旋转动画特效.rar
10-16
总结来说，通过这个“CSS3实现3D立体旋转动画特效.rar”实例，我们可以学习和实践CSS3的3D变换、过渡和动画功能，从而提升网页设计的动态效果和用户体验。实际操作和理解这些技术对于任何希望在网页设计领域有所建树...
CSS3 3D立方体旋转动画.zip
05-24
"CSS3 3D立方体旋转动画"是利用CSS3的3D变换特性来实现一个六面体的动态效果。下面我们将详细解析这一过程。 首先，我们要了解CSS3中的3D变换。3D变换是CSS3引入的新功能，它允许元素在三维空间中进行操作，包括...
从 Dream.3D 微结构网格 编写ABAQUS六面体网格的 MATLAB 脚本_MATLAB _ABAQUS
06-04
为给定的 Dream.3D 微结构网格编写 ABAQUS 六面体网格的 MATLAB 脚本 剧本 从 Dream.3D 中生成的文本文件中读取网格信息 将 ABAQUS 六面体 (C3D8) 网格写入 inp 文件 将每个元素的欧拉角写入文本文件
旋转的正方体css3制作3D立体效果
09-08
首先，我们需要理解CSS3中的3D变换基础。CSS3的`transform`属性允许我们对元素进行2D和3D的变换，如旋转、缩放、平移等。对于3D变换，我们需要使用`transform-style: preserve-3d;`属性，这确保了子元素在3D空间内...
HTML5 CSS3 ： 3D立方体旋转动画实例源码
07-12
代码为博客实例代码：http://blog.csdn.net/lmj623565791/article/details/34120047 有问题博客中留言
HTML5/CSS3可折叠的3D立方体动画
08-23
最近我们已经为大家分享过很多基于HTML5和CSS3的立方体动画，比如HTML5多立方体3D翻转动画和HTML5 3D立方体图片切换动画，效果都非常惊人。今天要给大家带来另外一款CSS3 3D立方体动画，尤其在DEMO2中可以看到，鼠标滑过立方体后，它将会被打开，从里面弹出另外一个小立方体，动画效果非常酷，非常逼真。
HTML5 3D/CSS3 3D爱心动画项目实例源码
08-20
大家可以点解DEMO来看看。CSS3代码，对这些线条进行渲染，以便其有3D的视觉效果。很多div，主要是构造爱心的线条区域。
HTML5/CSS3 3D下拉折叠菜单 3D子菜单
08-23
这回要分享的是一款很有特色的CSS3菜单，它不仅具有下拉菜单的特点，而且，下拉的子菜单是3D的折纸效果，看起来是挺酷而且简单的HTML5/CSS3下拉菜单。回顾之前分享的菜单，HTML5/CSS3 3D下拉折叠菜单这款菜单和今天分享的类似，不过那个有下拉的动画效果。
纯css（css3）实现的3D场景布局（有动画）
05-13
效果是我在网上看到的，但我用纯css实现了一遍，3D场景布局，中间有一个3D的柱状图，镜头会围绕柱状图来回旋转，水平线下还会有倒影。
css3实现一个3d楼梯动画
最新发布
郊眠寺
01-03 311
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
CSS3实现3D立体旋转动画特效
美奇软件开发工作室
10-16 2777
效果图： 源代码下载地址：https://download.csdn.net/download/qq15577969/11869377 html+css3代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3实现3D魔方动画...
前端基础CSS3-（3D动画）
DespairA的博客
09-02 543
一、透视属性；定义虚拟眼睛，perspective: ； 1.透视写到被观察元素的父盒子上面 2.当透视值小于z值的时候，是什么都看不见的， 3. z值就是物体到屏幕的距离， 4. 而透视，就是虚拟眼睛到屏幕的距离 body { perspective: 500px; } 二、3D移动 transform: translateX(100p...
css3 3d 与案例分析
Wangxinlei_King的博客
09-14 420
作者：魔洁 聊到3d那我们就先聊聊空间维度，首先一维，比如一条线就是一个一维空间，连点成线在这个空间里这些点只能前进后退，二维空间就是一个平面，这时点不仅可以前进后退还可以左右移动，3维空间也可以说是...
3DShop：FLAC3D的六面体网格预处理工具
"FLAC3D的3DShop用户手册" FLAC3D是一款强大的三维地质力学分析软件，而3DShop则是一个可选的配套程序，专门用于优化FLAC3D的模型创建过程。3DShop的核心功能在于其六面体网格划分预处理器，它允许用户通过图形界面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值