CSS3D动画制作一个3d旋转的筛子

最新推荐文章于 2022-03-15 15:26:00 发布
最新推荐文章于 2022-03-15 15:26:00 发布
阅读量383 收藏 1
点赞数
分类专栏： 前端
原文链接：https://www.mk2048.com/blog/blog_h2hikc0akkib.html
版权

希望这个demo能让大家理解CSS3的3d空间动画(其实是个假3D)

首先给一个3d的解剖图，x/y/z轴线轴线已经标出

1168666-20170519150909728-363955593.png

 

下面附上添加特效的动画旋转

可以根据demo并参考上面解剖图进行理解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html{
            height: 100%;
        }
        body{
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: black;
            perspective: 1000px;
            transform-style: preserve-3d;
            
        }
        section{
            width: 300px;
            height: 300px;
            transform-style: preserve-3d;
            animation: zhuan 16s infinite linear;
            
        }
        div{
            width: 300px;
            height: 300px;
            background-color: orange;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            position: absolute;   
            box-shadow: 0 0 300px green;
            opacity: 0.8;  
        }
        div:nth-child(1){
            transform: translateZ(300px);
            border-radius: 50%;
            box-shadow: 0 0 500px orange;
            opacity: 0.4;
        }
        div:nth-child(2){
            transform: rotateX(90deg) translateZ(300px);
            align-items: center;
            justify-content: space-around;
            flex-direction: column;
            border-radius: 50%;
            box-shadow: 0 0 500px orange;
            opacity: 0.4;
        }
        div:nth-child(3){
            transform: rotateY(90deg) translateZ(300px);
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: center;
            border-radius: 50%;
            box-shadow: 0 0 500px orange;
            opacity: 0.4;
        }
        div:nth-child(3) p:nth-child(2){
            align-self: center;
        }
        div:nth-child(3) p:nth-child(3){
            align-self: flex-end;
        }
        div:nth-child(4){
            transform: translateZ(-300px);
            flex-wrap: wrap;
            border-radius: 50%;
            box-shadow: 0 0 500px orange;
            opacity: 0.4;
        }
        div:nth-child(5){
            transform: rotateX(90deg) translateZ(-300px);
            border-radius: 50%;
            box-shadow: 0 0 500px orange;
            opacity: 0.4;
        }
        div:nth-child(6){
            transform: rotateY(90deg) translateZ(-300px);
            border-radius: 50%;
            box-shadow: 0 0 500px orange;
            opacity: 0.4;
        }
        .low{
            width: 300px;
            height: 150px;
            display: flex;
        }
        .low:nth-child(1){
            align-items: flex-end;
            justify-content: center; 
        }
        .low:nth-child(2){
            align-items: flex-start;
            justify-content: center;
        }
        .stree{
            width: 300px;
            height: 33.33%;
            display: flex;
        }
        .stree:nth-child(1){
            justify-content: space-around;
        }
        .stree:nth-child(2){
            justify-content: center;
        }
        .stree:nth-child(3){
            justify-content: space-around;
        }
        .fore{           
            width: 300px;
            height: 33.33%;
            display: flex;
        }
        .fore:nth-child(1){
            justify-content: center;
        }
        .fore:nth-child(3){
            justify-content: center;
        }
        p{
            width: 60px;
            height: 60px;
            background-color: white;
            border-radius: 50%;
            box-shadow: 200 60 400px #ccc;
            opacity: 0.7;
            margin: 10px;
            
        }
        @keyframes zhuan{
            0%{
                transform: rotateX(0deg) rotateY(0deg);
            }
            100%{
                transform: rotateX(360deg) rotateY(360deg) ;
            }
        }
      
    </style>
</head>
<body>  
    <section>
        <div>
            <p></p>
        </div>
        <div>
            <p></p>
            <p></p>
        </div>
        <div>
            <p></p>
            <p></p>
            <p></p>
        </div>
        <div>
        <main class="low">
            <p></p>
            <p></p>
        </main>
        <main class="low">    
            <p></p>
            <p></p>
        </main>
        </div>
        <div>
        <main class="stree">
            <p></p>
            <p></p>
        </main>
        <main class="stree">    
            <p></p>
        </main>
        <main class="stree">
            <p></p>
            <p></p>
        </main>
        </div>
        <div>
            <main class="fore">
            <p></p>
                <p></p>
            </main>
            <main class="stree">    
                <p></p>
                <p></p>
            </main>
            <main class="fore">
                <p></p>
                <p></p>
            </main>
        </div>      
    </section>
</body>
</html>

 

辛苦的码农20200609
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3-3D动画制作旋转立方体
01-20
CSS3-3D动画制作旋转立方体 3D动画是CSS3才有的属性，制作立方体的思路是使用6个正方形div，通过绝对定位+旋转+位移来合成一个立方体。然后再使父亲旋转。 旋转后的面会变成新的X-Y面，旋转后Z轴和位移是对新的面来说的，不是原来的面来说的，这点很重要，一定不要搞错。（也就是旋转后坐标轴的方向会改变） 代码很短，主要属性都加了注释了 CSS3动画制作旋转立方体 /* 制作动画的关键字@keyframes */ @keyframes rotate { 100% { /* 按(-1,1,0)这个矢量方向旋转360度，之所以不选坐标轴，是为
3d动画骰子（炫酷）
weixin_45249263的博客
03-30 1099
本例子只用到了HTML+CSS，通过CSS的3D属性、@keyframes关键帧等知识实现了该动画骰子
立体骰子实现3D炫酷旋转效果（附完整源码）（附动画代码）
qq_46034942的博客
02-12 2827
整体思路：首先搭建骰子整体的立方体 1.先搭建前后两个面(front和back)，通过定位（子绝父相）将两个盒子定位在立方体正面，此时一面遮挡了另一面，在父盒子中添加transform-style: preserve-3d;达到3d立体效果，将前盒子沿z轴正方向移动高一半距离，后盒子沿z轴负方向移动高一半距离，前后盒子搭建完成，可搭配hover和过渡查看效果； 2.左右盒子与步骤1类似，不过左右盒子是需要进行左右移动高一半距离，且需要绕Z轴转动； 3.与左右盒子搭建类似，需要绕X轴转动，需要沿Y轴上下
一个三维立体空间的筛子 纯css
m0_57446284的博客
02-25 180
在复习css的时候，发现自己使用的比较生疏，所以写一个css小项目。练一练手 这个三维立体的筛子主要的功能是，旋转 使用到css中的一些样式，有：flex弹性盒子、animation动画来完成 首先是没有注释版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE
纯CSS3制作骰子3D旋转动画效果
crippty的博客
03-18 5123
闲暇之余看了一些关于CSS3的3D动画方面的文章，自己写了一个3D骰子旋转动画效果，代码分享给大家。先直接上效果图：1.首先创建一个div用来装骰子（手动滑稽）&lt;div class="stage"&gt;&lt;div class="club&gt;&lt;div class="front"&gt;&lt;/div&gt;
CSS-3D之制作3D骰子
freesky的专栏
09-16 2124
CSS-3D之制作3D骰子 css3 3d其实还是转换的一种，css3提供了2D转换，里面有位移、缩放、旋转、斜拉，这些个效果都是在2d平面上的效果。那么3d其实就是多了一个维度，也就是多了个坐标轴。 页面中想做3d效果就需要一个东西，就是盛放3d变换的元素的容器，咱们把它叫做舞台，在stage的css加上transform-style: preserve-3d      可以不写哦（默认会判
CSS3制作3D骰子旋转动画特效
06-24
CSS3制作3D骰子旋转动画特效是一款鼠标移动控制正方体旋转动画特效。
CSS3爱心文字3D旋转动画特效
06-24
CSS3爱心文字3D旋转动画特效是一款情人节爱心文字表白动画，爱心3D旋转动画特效
css3实现3d旋转动画特效
09-25
主要介绍了css3实现3d旋转动画特效，使用CSS3实现了3d立方体的左旋转，右旋转，上下旋转等效果，十分实用，有需要的小伙伴来参考下吧
纯css3 3D旋转科技球体动画特效
11-03
纯css3 3D旋转科技球体动画特效 纯css3 3D旋转科技球体动画特效
UI实现色子效果
08-08
非cocos2d实现色子效果，适用于麻将类游戏
H5小游戏掷骰子
05-07
关于HTML5掷骰子的小游戏，用于学习基础HTML5的游戏编写。
css实现一个3D转动的骰子（附GIF效果图）
lovelyGFR的博客
03-15 1669
之前一直对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
CSS3 3D骰子
weixin_30539835的博客
08-10 399
z zz zz zzzz zzzzz zzzzzz 转载于:https://www.cnblogs.com/hubj/p/3885950.html
css动画 3d立体透明筛子
weixin_43294560的博客
06-21 456
做法: 6个div重叠,设置旋转中心点为z轴上某一点,按水平四个面,分别按中心点 旋转90度、180度、270度等,上下两个面，分别将旋转点设置在div的上边线和下边线,再分别绕x轴旋转对应的90度 代码示例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="./in
利用css做一个立体的骰子模型
m0_49266584的博客
10-17 739
利用css做一个立体的骰子模型 今天是学前端的第3个星期，一般我们用css写的东西都是平面的或者说，给我们的感觉是2D的，那我们今天来做一个3D的骰子模型。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS(3D骰子)</title> <style> *{ pad
html制作3d筛子,JS实现简单随机3D骰子
weixin_39835321的博客
06-10 676
本文实例为大家分享了JS实现简单随机3D骰子的具体代码，供大家参考，具体内容如下描述：JS——实现简单的随机3D骰子。效果：实现：html文件：DocumentPLAYcss文件：@keyframes rotate {to {transform: rotateX(360deg) rotateY(360deg);}}@keyframes domo{20%{transform: rotateX(20d...
Java 3D 骰子动画代码范例
mobilechannel的专栏
12-02 4005
作者：imtrash  文章来源：http://www.j2medev.com/Article/ShowArticle.asp?ArticleID=765创建3D效果非常简单，如果你有正确的工具，创建复杂的3D动画效果并不困难。在这个例子中，骰子和动画是用3DMAX来创建的。为了取代计算一个mesh的运动，运动可以被预先创建并保存在Mascot Capsule V3的mtra文件里或JSR 184
酷炫骰子 3d html,CSS3 3D骰子动画
weixin_34505281的博客
06-05 180
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...
CSS3D动画无限旋转
最新发布
05-27
要实现CSS3D动画的无限旋转，可以使用以下代码： ... ``` <!-- 内容 --> ...这段代码中，我们首先创建了一个具有透视效果的父级元素（`....最后，我们将动画应用于`.content`元素上，实现了一个无限旋转的CSS3D动画。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值