【第22期】观点:IT 行业加班,到底有没有价值?

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>


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

相关文章推荐

可控制的CSS3D盒子动画

今天来看一个CSS 3D盒子动画,利用jqueryUI和jquery实现盒子动画的控制,在线看请戳这里,下载把玩请戳这里。
  • whqet
  • whqet
  • 2014-02-24 20:55
  • 4618

3D动画立方体实现

3D立方体解析对于CSS3新增的属性,我们觉得最炫酷的应该最属于3D变换和2D变换以及动画了吧! 下面我将自己对transform中rotate、translate的理解和大家分享一下!3D坐标演示...

程序员升职加薪指南!还缺一个“证”!

CSDN出品,立即查看!

Unity3D动画

1. Unity3D老的动画系统 1.1 基本概念 1.1.1 AnimationClip      通过FBX导入的各个动画对象其实就是一个AnimationClip。此类以关键帧的形式记录了骨骼...

Unity3d之Animation(动画系统)

1,动画系统配置 创建游戏对象并添加Animation组件,然后将动画文件拖入组件。 2,代码控制动画 Play("ation 1" );,播放动画,传入参数为动画名字 Stop("ation 1")...

Unity3D新动画系统的事件的使用.

最近发现很多coder.在用Unity开发游戏的时候都需要一个需求就是..动画播到某一帧就要干什么事情.而且希望能得到回调. 在unity里面的window菜单有个.Animation工具.打开它....

unity3D 控制动画播放进度

1.如何获得当前动画播放到了第几帧~~  如果你指的是模型动画的话 是没办法取到具体的帧数的 因为那个动画是连续的曲线动画。只能知道现在在第几帧和第几帧之间。 通过nbalexis的方法计算:An...

CSS3之 3D变换、3D动画

CSS3之 3D变换、3D动画 3D变换 transform-style(preserve-3d) 建立3D空间 Perspective 景深(类似于站在多远地方看) Transform 新增...

3D背景图动画阴影效果

先看效果图 原理rotate的使用 当鼠标放到图片的一角处的时候,实现该处向下坍缩的效果,即用的是rotate的3D属性,此时的图片向相应的方向的进行偏转,偏转的角度x,y如下图所示:(与r...

7 款基于 HTML5 Canvas 的超炫 3D 动画效果

在以前,想要在浏览器中实现3D动画效果是非常困难的,但是自从HTML5诞生之后,这就变得十分简单了。遗憾的是,目前的浏览器对3D渲染效果还不是非常理想,尤其是渲染速度,可能用chrome和safari...

Android 简单的3D动画效果

在Android Api11之后,加入了属性动画,参加我的另一篇博文:Android Property Animation 属性动画 也加入了一些View的属性和对应的操作方法: iv.s...
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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