CSS3动画-3D旋转

最新推荐文章于 2024-05-16 03:33:23 发布
最新推荐文章于 2024-05-16 03:33:23 发布
阅读量2.3k 收藏 1
点赞数 1
分类专栏： CSS3 文章标签： css3 动画 旋转 3D
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26733915/article/details/51340094
版权

学了C3之后，简单做了一个3D旋转的小Demo.个人亲猜测兼容Chrome、Firefox、Opera、Safari，没有考虑IE。
如果下面代码有问题，可以在我的github查看源代码。
可以查看网页效果Demo地址。

/*代码如下：*/
<!doctype html>
<html>
    <head>
        <title>CCS3Animation——3DRotate</title>
        <meta charset="utf-8"/>
        <style>
            #Panel{
                margin:0 auto;
                width:500px;
                height:500px;
                background-color:transparent;
                position:relative;
                -webkit-transform-style:preserve-3d;
                -webkit-transform:rotateX(-33.5deg)
                rotateY(45deg);
                -webkit-animation:rota 2s linear 0s infinite
                normal;
                -moz-transform-style:preserve-3d;
                -moz-transform:rotateX(-33.5deg)
                rotateY(45deg);
                -moz-animation:rota 2s linear 0s infinite
                normal;
            }
            @-webkit-keyframes rota{
                from{
                    -webkit-transform:rotateX(-33.5deg)
                    rotateY(45deg);
                    }
                to{
                    -webkit-transform:rotateX(-33.5deg)
                    rotateY(405deg);
                    }
            }
            @-moz-keyframes rota{
                from{
                    -moz-transform:rotateX(-33.5deg)
                    rotateY(45deg);
                    }
                to{
                    -moz-transform:rotateX(-33.5deg)
                    rotateY(405deg);
                    }
            }
            #Panel div{
                width:100px;
                height:100px;
                opacity:0.4;
                position:absolute;
                top:202px;
                left:202px;
            }
            #Panel #top{
                background-color:red;
                -webkit-transform:rotateX(90deg)
                translateZ(50px);
                -moz-transform:rotateX(90deg)
                translateZ(50px);
            }
            #Panel #bottom{
                background-color:pink;
                -webkit-transform:rotateX(90deg)
                translateZ(-50px);
                -moz-transform:rotateX(90deg)
                translateZ(-50px);
            }
            #Panel #left{
                background-color:green;
                -webkit-transform:translateZ(-50px);
                -moz-transform:translateZ(-50px);
            }
            #Panel #right{
                background-color:blue;
                -webkit-transform:translateZ(50px);
                -moz-transform:translateZ(50px);
            }
            #Panel #front{
                background-color:yellow;
                -webkit-transform:rotateY(90deg)
                translateZ(50px);
                -moz-transform:rotateY(90deg)
                translateZ(50px);
            }
            #Panel #back{
                background-color:black;
                -webkit-transform:rotateY(90deg)
                translateZ(-50px);
                -moz-transform:rotateY(90deg)
                translateZ(-50px);
            }
        </style>
    </head>
    <body>
        <div id="Panel">
            <div id="top"></div>
            <div id="bottom"></div>
            <div id="left"></div>
            <div id="right"></div>
            <div id="front"></div>
            <div id="back"></div>
        </div>
    </body>
</html>
xhsdnn
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3 3D旋转动画
10-16
css3 图片万花筒3D旋转动画特效=====================
CSS3实现3D立方体旋转动画特效.zip
07-03
CSS3实现3D立方体旋转动画特效是一款纯CSS3制作的3d旋转动画效果。
一文搞懂CSS 3D动画效果
最新发布
2401_84091742的博客
05-16 708
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
CSS3动画之3D旋转
MaNqo的博客
05-11 561
今天分享一下一个用3d效果写出来的小demo 效果展示 这个做出来的效果没有预想中的那么好看，不过还是勉勉强强可以看吧嘤嘤嘤。 实现前想说一下 在做一个项目或者是小demo之前一定要好好构思，哪个盒子和哪个盒子放在一起，思考完成项目的个大概思路，然后再进行操作，否则会浪费很多时间在不必要的东西上。 布局之前一定要经过思考！！设想出你各种操作所会产生的各种不同结果，一个好的布局真滴可以省好多时间，真就亲身实践得出的经验555，如果了完成了一个很好的布局，当你在写css或者是js的时候真的能感受到什么叫.
【CSS卡片翻转特效】CSS3实现3D旋转动画卡片翻转效果（附源码）
赏樱看雪撸代码
07-07 2104
CSS3如何实现卡片翻转效果，CSS3如何实现3D旋转效果，CSS实现卡片动态效果，页面实现dom翻转效果，好看的CSS样式特效。
css3实现3d旋转动画特效
09-25
主要介绍了css3实现3d旋转动画特效，使用CSS3实现了3d立方体的左旋转，右旋转，上下旋转等效果，十分实用，有需要的小伙伴来参考下吧
css3-3d旋转-色子
09-30
本项目"css3-3d旋转-色子"就是对这一技术的生动运用，它通过CSS3实现了一个3D旋转的色子动画，用户可以自由定制布局和动画频次，适应不同的应用场景。 ### CSS3 3D变换基础 CSS3的3D变换主要由以下几种属性组成： ...
CSS3-3D动画制作旋转立方体
01-20
在CSS3中，3D动画提供了丰富的视觉效果，使得网页设计更加生动有趣。本文将详细介绍如何使用CSS3创建一个旋转的立方体动画。这个过程主要依赖于CSS3的3D变换属性，包括`transform`, `perspective`, `transform-style...
CSS-3D悬停相册动画
03-21
2. **3D旋转** - `rotateX`, `rotateY`, `rotateZ`：分别沿X、Y、Z轴进行旋转，通过角度值定义旋转度数。 - `rotate3d(x, y, z, angle)`: 允许指定任意轴进行旋转，x, y, z为轴向量的分量，angle为旋转角度。 3. ...
CSS3爱心文字3D旋转动画特效
06-24
在本文中，我们将深入探讨如何使用CSS3来创建一个具有3D旋转动画特效的爱心文字，这正是"CSS3爱心文字3D旋转动画特效"所涉及的核心知识点。这个特效非常适合在情人节这样的特殊场合使用，为表达爱意增添一份浪漫与...
CSS3立方体3D旋转加载动画.zip
05-14
这个“CSS3立方体3D旋转加载动画”压缩包文件提供了一个利用CSS3实现的3D立方体旋转加载效果的实例。这种效果常用于网站加载时显示，以增加用户体验，展示数据正在加载的动态过程。 首先，我们要理解CSS3的3D转换。...
轻量级CSS3立体式3D旋转动画效果.zip
07-03
一个非常简洁好看的纯CSS3旋转效果 当鼠标移动到图片上后，会立体式翻转显示隐藏的文字内容 鼠标移走后消失
CSS3制作3D骰子旋转动画特效
06-24
CSS3制作3D骰子旋转动画特效是一款鼠标移动控制正方体旋转动画特效。
轻量级CSS3立体式3D旋转动画效果特效代码
03-20
一个非常简洁好看的纯CSS3旋转效果 当鼠标移动到图片上后，会立体式翻转显示隐藏的文字内容 鼠标移走后消失
CSS3 3D金字塔旋转动画特效.zip
07-11
代码： <svg>   <clipPath id="c1" clipPathUnits="objectBoundingBox">     <polygon points="0.50000,0.00000 0.57794,0.13500 0.42206,0.13500 0.50000,0.00000"></polygon>   </clipPath>   <clipPath id="c2" clipPathUnits="objectBoundingBox">     <polygon points="0.59526,0.16500 0.66454,0.28500 0.33546,0.28500 0.40474,0.16500"></polygon>   </clipPath>   <clipPath id="c3" clipPathUnits="objectBoundingBox">     <polygon points="0.68187,0.31500 0.75115,0.43500 0.24885,0.43500 0.31813,0.31500"></polygon>   </clipPath>   <clipPath id="c4" clipPathUnits="objectBoundingBox">     <polygon points="0.76847,0.46500 0.83775,0.58500 0.16225,0.58500 0.23153,0.46500"></polygon>   </clipPath>   <clipPath id="c5" clipPathUnits="objectBoundingBox">     <polygon points="0.85507,0.61500 0.93301,0.75000 0.06699,0.75000 0.14493,0.61500"></polygon>   </clipPath> </svg>
超酷CSS3图片3D旋转效果
10-31
超酷CSS3图片3D旋转效果 超酷CSS3图片3D旋转效果 超酷CSS3图片3D旋转效果
css3动画实现3d旋转效果
weixin_57156748的博客
12-07 2179
主要用了css3中的animation和transition
CSS3实现3D立体旋转动画特效
美奇软件开发工作室
10-16 2764
效果图： 源代码下载地址：https://download.csdn.net/download/qq15577969/11869377 html+css3代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3实现3D魔方动画...
用c3制作3d盒子旋转特效
diaojiaochu4642的博客
01-18 280
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ background-color: #000; } ...
css实现3个盒子3d旋转动画
12-16
以下是CSS实现3个盒子3D旋转动画的代码和步骤： ```html <div class="box"></div> <div class="box"></div> <div class="box"></div> ``` ```css .container { perspective: 1000px; /* 视距，决定了3D效果...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值