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 transform介绍|如何设计炫酷的动画效果

CSS里transform变形这个属性有点学习难度,尤其在CSS3里加上了3D效果之后,2维变3维学习成本更是成倍提高。为什么设计师的眼里饱含着泪水,因为对页面效果爱的深沉。本篇就介绍一下transf...
  • yeana1
  • yeana1
  • 2016-07-08 15:44
  • 3158

css3实现下划线动画效果

效果制作gif的时候有卡顿方法通过css3的transform和transition属性来实现代码 下划线从左到右效果 下划线动画 /*先把a的原有下...

css3动画效果

  • 2014-08-18 14:23
  • 17KB
  • 下载

Css3动画效果

CSS3 几步即可实现loading动画效果

参照网上的设计,本篇分享一下非常常见的Loading的效果。 例子1:菊花状的Loading效果 ------------------------------ 第一步画出静态的小菊花...
  • yeana1
  • yeana1
  • 2016-07-14 16:06
  • 2210

css3鼠标悬停动画效果

内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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