css3 3D动画效果

原创 2016年08月29日 16:10:55

今天看了html页面上一个类似骰子的动画效果,感觉不比app上原生的效果差,出于好奇,学习了如何用css制作3D效果。

以下是我学习的过程,最底部是附件代码,感兴趣同学可以看看。

1.先复习w3cschool中关于CSS3 3D转换

http://www.w3school.com.cn/css3/css3_3dtransform.asp

2.上慕课网上,看相关视频

http://www.imooc.com/learn/77

视频我没有看完,直接下了demo看,不过感觉和我想要的效果不太一样。所以我运行demo看过以后直接去搜其他3D demo

3.很幸运,在搜索CSS3 3D效果 在百度文库中找到了类似的demo

http://wenku.baidu.com/link?url=QSik0TF5I9Y3Fjic73E7R-hn-r4R2Oj5vH6f_ezSH4It_Q-MbEopo7g_lcL3kNXr-HezF_3i_O5AG6DR5onO9vVsvPC0oWZ1d2ta-xYpz1u

4.在看懂demo的前提下,尝试设置动画的开启和关闭功能

5.通过JS完成动画的开启和关闭功能

效果图如下:


在百度的过程中发现很多css 3D动画效果的demo都要付费,所以再次感谢,以上三个免费并且开源的作者。

另外提供一个比较炫的3d网址,里面的网页可以单独打开。

http://www.xuebuyuan.com/396491.html

最后,与君共勉!!!

附件:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>
            正方体展开到旋转
        </title>
        <style>
            * {
                padding: 0 margin: 0;
            }            
            img {
                border: 0;
            }
            #view {
                perspective: 500px;
            }
            @keyframes scroll {
                100% {
                    transform: rotate3d(1, 1, 1, 360deg);
                }
            }
            #cube {
                position: relative;
                width: 200px;
                height: 200px;
                margin: 200px auto;
                perspective-origin: 250px -50px;
                animation: scroll 2s linear 7s infinite;
                transform-style: preserve-3d;
            }
            .item {
                width: 200px;
                height: 200px;
                position: absolute;
                opacity: 0.85;
                text-align: center;
                background: rgb(0, 148, 255);
                font-size: 30px;
                font-weight: bold;
                color: #000;
                line-height: 200px;
            }
            @keyframes item1 {
                100% {
                    transform: rotateY(-90deg);
                }
            }
            #item1 {
                z-index: 6;
                transform-origin: left;
                animation: item1 1s linear 1s both;                
            }
            @keyframes item2 {
                100% {
                    transform: rotateY(90deg);
                }
            }
            #item2 {
                z-index: 5;
                transform-origin: right;
                animation: item2 1s linear 2s both;            
            }
            @keyframes item3 {
                100% {
                    transform: rotateX(90deg);
                }
            }
            #item3 {
                z-index: 4;
                transform-origin: top;
                animation: item3 1s linear 3s both;        
            }
            @keyframes item4 {
                100% {
                    transform: rotateX(-90deg);
                }
            }
            #item4 {
                z-index: 3;
                transform-origin: bottom;
                animation: item4 1s linear 4s both;    
            }
            @keyframes item5 {
                100% {
                    transform: translateZ(200px);
                }
            }
            #item5 {
                z-index: 2;
                animation: item5 1s linear 5s both;                
            }
            @keyframes item6 {
                100% {
                    transform: rotateY(180deg);
                }
            }
            #item6 {
                z-index: 1;
                animation: item6 1s linear 6s both;
            }
            form{
                margin: 0px 300px;
            }
            .btn{
                width:100px;
                height:50px;
            }
        </style>
    </head>
    <body>
        <div id="view">
            <div id="cube">

                <div class="item" id="item1" name="e">左边</div>
                <div class="item" id="item2" name="e">右边</div>
                <div class="item" id="item3" name="e">上面</div>
                <div class="item" id="item4" name="e">底部</div>
                <div class="item" id="item5" name="e">前面</div>
                <div class="item" id="item6" name="e">后面</div>
            </div>
        </div>
    <form>
        <input type="button" value="OFF" class="btn" onclick="offAnimation()">
        <input type="button" value="ON" class="btn" onclick="onAnimation()">
      </form>
    </body>
<script>
    var cube = document.getElementById("cube");
    var item = document.getElementsByName("e");
    function offAnimation(){
        for(var i=0; i<item.length;i++){
            item[i].style.animationPlayState="paused";
        }
        cube.style.animationPlayState = "paused";
    }
    function onAnimation(){
        for(var i=0; i<item.length;i++){
            item[i].style.animationPlayState="running";
        }
        cube.style.animationPlayState = "running";
    }
</script>
</html>


版权声明:本文为博主原创文章,未经博主允许不得转载。

纯CSS3超酷3D旋转立方体动画特效

这是一款效果非常炫酷的纯CSS3 3D旋转立方体动画特效。该3D立方体使用CSS3 perspective制作,可以在水平方向、垂直方向和平面视角方向旋转,效果相当震撼。 ...
  • natalie86
  • natalie86
  • 2015年04月20日 19:47
  • 1787

css3绘制3d翻页效果

核心内容: 1.css3的transition属性来制作简单的动画 transition属性可以为指定的css属性添加动画效果,这个动画用到的是transform属性 transition:...
  • Yalishizhude
  • Yalishizhude
  • 2015年02月22日 23:21
  • 2042

css3 js实现3D旋转效果

用css3和js实现3D旋转的效果,主要使用到css3 transform中的一些属性:perspective,rotate,translate。下面主要介绍一些transform中的属性的效果和作用...
  • qq_30792041
  • qq_30792041
  • 2017年04月06日 08:21
  • 1233

利用HTML5和CSS3实现很酷的3D纸片折叠动画效果

  • 2014年09月25日 12:59
  • 2KB
  • 下载

jQuery+css3实现的可爱3D动画展示效果

  • 2013年05月08日 13:46
  • 192KB
  • 下载

CSS3实现动态翻牌效果 仿百度贴吧3D翻牌一次动画特效

今天分享一个CSS3制作的翻牌效果,效果如下图所示,所过把把这个效果应用于相册肯定会很炫的。呵呵,超酷啊。 一、HTML代码:   因为是CSS3实现,所以大家可以看到没有任何的JS代码。ul为一组...
  • zhaokunsummer
  • zhaokunsummer
  • 2017年12月14日 11:16
  • 194

纯CSS3实现动态翻牌效果 仿百度贴吧3D翻牌一次动画特效

一.html html>   head>     meta charset="gb2312">     title>百度帖吧 CSS3 翻牌效果title>     link rel...
  • qq_34742182
  • qq_34742182
  • 2016年10月25日 17:50
  • 244

css3动画效果

  • 2017年12月13日 13:52
  • 11.76MB
  • 下载

27个精致的CSS3动画效果

  • 2017年08月23日 09:08
  • 62.53MB
  • 下载

好玩的css3动画效果

  • 2017年08月22日 00:33
  • 6KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3 3D动画效果
举报原因:
原因补充:

(最多只允许输入30个字)