<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

        body{

            background: skyblue;

        }

        html,body{

            height: %;;

        }

        #box1{

            width: %;

            height: %;

        }

        #box2{

            width: 200px;

            height: 200px;

            margin: 200px auto;

            position: relative;

            transform-style: preserve-3d;

            /*perspective: 500px;*/

            animation: a 10s linear infinite;

        }

        .box{

            position: absolute;

            height: 200px;

            width: 200px;

            border: 1px solid #fff;

            background: rgba(,,,.);

            transition: transform 2s ease-in;

            color: #fff;

            font-size: 25px;

            font-weight: bold;

            line-height: 200px;

            text-align: center;

        }

        .small{

            position: absolute;

            top: 50px;

            left: 50px;

            height: 100px;

            width: 100px;

            border: 1px solid #;

            background: rgba(,,,);

            transition: transform 2s ease-in;

        }

        #before{

            transform: translateZ(100px);

        }

        #after{

            transform: translateZ(-100px);

        }

        #left{

            transform: rotateY(90deg) translateZ(100px);

        }

        #right{

            transform: rotateY(90deg) translateZ(-100px);

        }

        #up{

            transform: rotateX(90deg) translateZ(100px);

        }

        #down{

            transform: rotateX(90deg) translateZ(-100px);

        }

        #s-before{

            transform: translateZ(50px);

        }

        #s-after{

            transform: translateZ(-50px);

        }

        #s-left{

            transform: rotateY(90deg) translateZ(50px);

        }

        #s-right{

            transform: rotateY(90deg) translateZ(-50px);

        }

        #s-up{

            transform: rotateX(90deg) translateZ(50px);

        }

        #s-down{

            transform: rotateX(90deg) translateZ(-50px);

        }

        #box2:hover #before{

            transform: translateZ(300px);

        }

        #box2:hover #after{

            transform: translateZ(-300px);

        }

        #box2:hover #left{

            transform: rotateY(90deg) translateZ(300px);

        }

        #box2:hover #right{

            transform: rotateY(90deg) translateZ(-300px);

        }

        #box2:hover #up{

            transform: rotateX(90deg) translateZ(300px);

        }

        #box2:hover #down{

            transform: rotateX(90deg) translateZ(-300px);

        }

            @-webkit-keyframes a{

                from{

                    transform: rotateX(0deg) rotateY(0deg);

                }

                to{

                    transform: rotateX(360deg) rotateY(360deg);

                }

            }

        </style>

    </head>

    <body>

        <div id="box1">

            <div id="box2">

                <div id="before" class="box">

                    前面

                </div>

                <div id="after" class="box">

                    后面

                </div>

                <div id="left" class="box">

                    左面

                </div>

                <div id="right" class="box">

                    右面

                </div>

                <div id="up" class="box">

                    上面

                </div>

                <div id="down" class="box">

                    下面

                </div>

                <span class="small" id="s-before"></span>

                <span class="small" id="s-after"></span>

                <span class="small" id="s-left"></span>

                <span class="small" id="s-right"></span>

                <span class="small" id="s-up"></span>

                <span class="small" id="s-down"></span>

            </div>

        </div>

    </body>

</html>

本次的这个demo用了CSS3中的2d和3d属性，完成了一个盒子的立体效果

demo_03HTML5中的动画效果的更多相关文章

  1. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  2. Android中的动画效果

    动画的种类 透明动画alphaAnimation 在代码中配置动画: findViewById(R.id.btnAnimMe).setOnClickListener(new View.OnClickL ...

  3. css3实现的3中loading动画效果

    一.css3中animation动画各种属性详解: animation Value:     [<animation-name> || <animation-duration> ...

  4. Vue中过度动画效果应用

    一.实现动画过渡效果的几种方式 实现动画必须要将要进行动画的元素利用<transition>标签进行包裹 1.利用CSS样式实现过渡效果 <transition name=" ...

  5. css3中的动画效果

    css3中的animation属性动画效果代码如下: <!DOCTYPE html> <html lang="en"> <head> <m ...

  6. angular中的动画效果

    用angular来形成动画效果的代码如下 <!DOCTYPE html> <html lang="en" ng-app="app"> & ...

  7. Android---63---Android中的动画效果

    Android中有四种动画效果: AlphaAnimation:透明度动画效果 ScaleAnimation:缩放动画效果 TranslateAnimation:位移动画效果 RotateAnimat ...

  8. CSS3中的动画效果-------Day72

    还记得么,在前面也曾实现过"仅仅用css让div动起来",还记得当时是怎么实现的么,是的,transition,针对的也比較局限,仅仅有旋转角度啊,长宽啊之类的,所以说,与其说是动 ...

  9. Vue中的动画效果

    Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css ...

随机推荐

  1. JAVA--对象锁

    在并发环境下,解决共享资源冲突问题时,可以考虑使用锁机制. 1.对象的锁 所有对象都自动含有单一的锁. JVM负责跟踪对象被加锁的次数.如果一个对象被解锁,其计数变为0.在任务(线程)第一次给对象加锁 ...

  2. 397. Integer Replacement

    先正统做法. public class Solution { public int integerReplacement(int n) { if(n == 1) return 0; int res = ...

  3. Yii2中request的使用方法

    1.普通的get和pst请求 $request = Yii::$app->request; $get = $request->get(); // 等同于: $get = $_GET; $i ...

  4. Hibernate中inverse属性与cascade属性

    Hibernate集合映射中,经常会使用到"inverse"和"cascade"这两个属性.对于我这样,Hibernate接触不深和语文水平够烂的种种因素,发现 ...

  5. (转)tar 解压缩命令

    tar -c: 建立压缩档案-x:解压-t:查看内容-r:向压缩归档文件末尾追加文件-u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只能用其中一个.下面的 ...

  6. GO的跨平台数扰类型

    基本数据类型的包装: 1.跨平台,用于移植 2.不同的框架类型包装的类型(MFC ,WIN32SDK,C) 3.基本数据类型的组装成的结构体 4.宏定义 数字类型 Go 也有基于架构的类型,例如:in ...

  7. android自定义控件之模仿优酷菜单

    去年的优酷HD版有过这样一种菜单,如下图: 应用打开之后,先是三个弧形的三级菜单,点击实体键menu之后,这三个菜单依次旋转退出,再点击实体键menu之后,一级菜单会旋转进入,点击一级菜单,二级菜单旋 ...

  8. 【Android】数据存储-SharedPreferences存储

    简单介绍:SharedPreferences是使用键值对的方式来存储数据的,也就是说,当保存一条数据的时候,给这条数据提供一个键,如果需要读取数据,只需要通过这个键就可以提取到对应的数据. 一:存储数 ...

  9. css3之@font-face---再也不用被迫使用web安全字体了

    1,@font-face 的出现在没有css3之前,我们给网页设计字体只能设置web安全字体,使得我们的网页表现看上去好像都是那个样子,那么如果我们想给字体设置web设计者提供的字体呢?没有问题,cs ...

  10. java: Eclipse jsp tomcat 环境搭建（完整）

    ] 欢迎您! 要学习一门语言,首先要做的就是搭建环境,然后能写一个小的Demo(类似Helloworld),不仅可以建立信心,而且还可以为之后的学习搭建一个验证平台,事半功倍. net领域的vs,号称 ...