界面实例--旋转的3d立方体

好吧,这里直接编辑源码并不允许设置css和js……毕竟会有危险……那直接放代码吧

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-test</title>
    <link rel="stylesheet" href="cube.css"><!--css-->
    <script src="jquery-3.3.1.min.js"></script><!--引入jquery-->
    <style>
    .contain{
        margin-top:100px;
        position:relative;
        width:800px;
        height:400px;
        background:black;
        padding:20px;
        text-align:center;

    }
    .row{
        position:relative;
    }
    .contain .button-container{

    }
    .contain .cube-container{

        width:300px;
        height:300px;
        margin:auto;
    }
    .content-container{
        color:white;
        border:1px solid white;
        width:300px;
        max-height:400px;
        overflow:auto;
        position:absolute;
        left:20px;
        top:20px;
        display:none;
    }
    .contain .button-container .control-button{
        width:40px;
        height:40px;
        background:black;
        color:white;
        border-radius:20px;
        outline: none;
    }
    .contain .button-container .control-button.choose{
        background:white;
        color:black;
    }
    </style>
  </head>
  <body>
    <div class="contain">
        <div class="row">
            <div class="cube-container">
                <div class="cube animation-rotating">
                    <div class="surface surface1">1</div>
                    <div class="surface surface2">2</div>
                    <div class="surface surface3">3</div>
                    <div class="surface surface4">4</div>
                    <div class="surface surface5">5</div>
                    <div class="surface surface6">6</div><!---->
                </div>
            </div>
            <div class="content-container">
                <div class="content-title"></div>
                <div class="content"></div>
            </div>
        </div>
        <div class="button-container">
            <button class="control-button choose">0</button>
            <button class="control-button">1</button>
            <button class="control-button">2</button>
            <button class="control-button">3</button>
            <button class="control-button">4</button>
            <button class="control-button">5</button>
            <button class="control-button">6</button>

        </div>
    </div>

    <script>
        var content=[
            {‘title‘:‘越人歌‘,‘content‘:‘今夕何夕兮,搴舟中流。今日何日兮,得与王子同舟。蒙羞被好兮,不訾诟耻。心几烦而不绝兮,得知王子。山有木兮木有枝,心悦君兮君不知。‘},
            {‘title‘:‘木兰花·拟古决绝词柬友‘,‘content‘:‘人生若只如初见,何事秋风悲画扇。等闲变却故人心,却道故人心易变。骊山语罢清宵半,泪雨霖铃终不怨。何如薄幸锦衣郎,比翼连枝当日愿。‘},
            {‘title‘:‘江城子·乙卯正月二十日夜记梦‘,‘content‘:‘十年生死两茫茫,不思量,自难忘。千里孤坟,无处话凄凉。纵使相逢应不识,尘满面,鬓如霜。夜来幽梦忽还乡,小轩窗,正梳妆。相顾无言,惟有泪千行。料得年年肠断处,明月夜,短松冈‘},
            {‘title‘:‘离思五首·其四‘,‘content‘:‘曾经沧海难为水,除却巫山不是云。取次花丛懒回顾,半缘修道半缘君。‘},
            {‘title‘:‘南歌子词二首 / 新添声杨柳枝词‘,‘content‘:‘一尺深红胜曲尘,天生旧物不如新。合欢桃核终堪恨,里许元来别有人。井底点灯深烛伊,共郎长行莫围棋。玲珑骰子安红豆,入骨相思知不知。‘},
            {‘title‘:‘卜算子·我住长江头‘,‘content‘:‘我住长江头,君住长江尾。日日思君不见君,共饮长江水。 此水几时休,此恨何时已。只愿君心似我心,定不负相思意。‘},
        ];
        $(document).ready(function(){
            $(‘.cube .surface‘).hover(
                function(e){
                    $(this).addClass(‘hover‘).siblings().removeClass(‘hover‘);
                    index=$(this).index()+1;//被指向哪一面,数值1-6
                    $(‘.control-button‘).eq(index).addClass(‘choose‘).siblings().removeClass(‘choose‘);//那一面绑定的按钮处于选择状态
                    $(this).parent().attr(‘class‘,‘cube show‘+index);//正方体停止旋转并转向该面
                    //显示内容
                    $(‘.content-container .content-title‘).html(content[index-1][‘title‘]);
                    $(‘.content-container .content‘).html(content[index-1][‘content‘]);
                    $(‘.content-container‘).css({‘display‘:‘block‘});
                },
                function(e){
                    $(this).removeClass(‘hover‘);
                    $(this).parent().attr(‘class‘,‘cube animation-rotating‘);
                    $(‘.control-button‘).eq(0).addClass(‘choose‘).siblings().removeClass(‘choose‘);
                    $(‘.content-container‘).css({‘display‘:‘none‘});

                });
            $(‘.control-button‘).on(‘click‘,function(){
                index = $(this).index();//按钮的顺序,0是返回原始状态,1-6分别对应6个面
                console.log(index);
                if(index==0){//返回原始状态
                    $(‘.control-button‘).eq(0).addClass(‘choose‘).siblings().removeClass(‘choose‘);
                    $(‘.cube‘).attr(‘class‘,‘cube animation-rotating‘);//正方体重新运转
                    $(‘.hover‘).each(function(){//没有任何一面处于hover状态
                        $(this).removeClass(‘hover‘);
                    });
                    $(‘.content-container‘).css({‘display‘:‘none‘});

                }
                else{//触发1-6面被hover的状态
                    $(‘.cube .surface‘).eq(index-1).trigger(‘mouseenter‘);
                }

            });

        });
    </script>

  </body>
</html>

index.html

    .cube-container{
        perspective:1000px;
        -webkit-perspective:1000px;
        transform:scale(0.8);
    }
    .cube{
        height: 200px;
        width: 200px;
        position: relative;
        margin:auto;
        transform-style:preserve-3d;/*定义3d转换*/
        transition: all 1s;

    }
    .cube.show1{
        transform:rotateX(0deg) rotateY(0deg);
    }
    .cube.show2{
        transform:rotateX(0deg) rotateY(180deg);
    }
    .cube.show3{
        transform:rotateX(0deg) rotateY(90deg);
    }
    .cube.show4{
        transform:rotateX(0deg) rotateY(-90deg);
    }
    .cube.show5{
        transform:rotateX(-90deg) rotateY(0deg);
    }
    .cube.show6{
        transform:rotateX(90deg) rotateY(0deg);
    }
    .animation-rotating{
        animation:rotating 8s infinite;/*animation:动画名字 时长 无限循环 线性速度(匀速)*/
    }
    /*动画效果,也可以以百分百的方式。默认逆时针的方向旋转。*/
    @keyframes rotating{
        from{transfrom:rotate3d(0.5,-0.5,0,0deg)}
        to{transform:rotate3d(0.5,-0.5,0,-360deg)}
    }
    .cube .surface{
        height: 100%;
        width: 100%;
        opacity: 0.6;
        position: absolute;
        text-align: center;
        background: black;
        color:#fff;
        line-height: 200px;
        font-size: 30px;
        border:1px solid #fff;
        transition: all 1s;
    }
    .cube .surface1{
        transform:translateZ(100px);
    }
    .cube .surface2{
        transform:rotateY(180deg) translateZ(100px);
    }
    .cube .surface3{
        transform:rotateY(-90deg) translateZ(100px);
    }
    .cube .surface4{
        transform:rotateY(90deg) translateZ(100px);
    }
    .cube .surface5{
        transform:rotateX(90deg) translateZ(100px);
    }
    .cube .surface6{
        transform:rotateX(-90deg) translateZ(100px);
    }

    .cube .surface1:hover, .cube .surface1.hover{
        transform:translateZ(200px);
        background:white;
        color:black;
    }
    .cube .surface2:hover, .cube .surface2.hover{
        transform:rotateY(180deg) translateZ(200px);
        background:white;
        color:black;
    }
    .cube .surface3:hover, .cube .surface3.hover{
        transform:rotateY(-90deg) translateZ(200px);
        background:white;
        color:black;
    }
    .cube .surface4:hover, .cube .surface4.hover{
        transform:rotateY(90deg) translateZ(200px);
        background:white;
        color:black;
    }
    .cube .surface5:hover, .cube .surface5.hover{
        transform:rotateX(90deg) translateZ(200px);
        background:white;
        color:black;
    }
    .cube .surface6:hover, .cube .surface6.hover{
        transform:rotateX(-90deg) translateZ(200px);
        background:white;
        color:black;
    }

cube.css

原文地址:https://www.cnblogs.com/liwxmyself/p/10346106.html

时间: 2024-10-19 04:05:59

界面实例--旋转的3d立方体的相关文章

HTML5 CSS3 诱人的实例: 3D立方体旋转动画DEMO

创意来自:http://www.html5tricks.com/demo/html5-3d-cube/index.html , 同学给我发的例子,感觉很不错,不过实在想不出来实际的用处,但是效果很炫~ 效果图: 知识点: 1.perspective ,transform 的复习 2.css3 backgroud实现格格背景,即面上的小格格 3. @-webkit-keyframes 实现动画 HTML: <body> <div class="stage"> &l

css3-实现3D立方体旋转

核心内容: 1.CSS3 中 animation.perspective 属性的熟练运用. 2.CSS3 中的变形属性 transform,在 3D 立体效果中的运用. 3.3D 立方体旋转实现原理. 实例:        创建大小两个盒子,小盒子放在大盒子里面,通过3D立体定位调整各自的位置,呈现一个立方体的现状:然后定义鼠标移入后的动画帧事件.实现如下效果图一样的模型. HTML: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <

基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标,来获得鼠标在X轴.Y轴移动的距离,将距离实时赋值给transform属性 从而通过改变transform:rotate属性值来达到3d立方体旋转的效果 HTML代码块: <body> <input type="button" clas

CSS3实现嵌套立方体旋转的3D效果

刚发现一个网站上面的3D立方体效果挺好看的,就模仿着用CSS3实现了一个类似的效果:http://1.huizit1.applinzi.com//CSS/transform_3D/cube_3D.html 这样的3D透视效果主要是用了perspective和transform-style: preserve-3d;这两个属性.然后在相应的元素上添加transform就行了. 先看一下布局结构: <div class="container"> <div class=&q

纯CSS3炫酷全屏3D立方体旋转展示幻灯片特效

这是一款效果非常酷的纯CSS3全屏3D立方体旋转展示幻灯片特效.该幻灯片使用全屏的3D立方体作为slide的载体,通过上下导航按钮,可以垂直旋转立方体,将立方体各个面上的幻灯片图片展示出来,效果非常炫酷. 在线预览   源码下载 使用方法 HTML结构 该幻灯片的立方体结构使用的是一个无序列表来制作,每一个<li>元素是一个立方体的面.幻灯片的上下导航按钮使用的是radio单选按钮和label来制作.整个3D立方体幻灯片被包裹在一个div容器中. 1 2 3 4 5 6 7 8 9 10 11

Opengl ES 1.x NDK实例开发之七:旋转的纹理立方体

开发框架介绍请參见:Opengl ES NDK实例开发之中的一个:搭建开发框架 本章在第六章(Opengl ES 1.x NDK实例开发之六:纹理贴图)的基础上绘制一个旋转的纹理立方体,原理和纹理贴图一样,须要注意的是定好正方体的顶点数组. [实例解说] 本实例加入了一个显示fps的小功能,在java层实现,原理是统计一分钟内屏幕刷新的次数 [实例源代码] [GLJNIActivity.java] /* * Copyright (C) 2007 The Android Open Source P

基于css3的3D立方体旋转特效

今天给大家分享一款基于css3的3D立方体旋转特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下 : 在线预览   源码下载 实现的代码. html代码: <div class="wrap"> <div class="box1 box"> 1</div> <div class="box2 box">

css3实践—创建3D立方体

css3实践-创建3D立方体 要想实现3D的效果,其实非常简单,只需指定一个元素为容器并设置transform-style:preserve-3d,那么它的后代元素便会有3D效果.不过有很多需要注意的地方,这里把我学习的方法,过程分享给大家.再讲知识点之前,还是先弄清楚3D的坐标系吧,从网上搜了一张经典坐标系图,供大家回顾一下. 1.3D试图 transform-style:flat(默认,二维效果) / preserve-3d(三维效果).设置一个元素的transform-style:pres

CSS3 3D立方体效果

CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立方体的效果实例来深入了解css3的transform属性,下面是这个实例的截图,加上动画还能旋转起来哟,是不是很酷炫?换上你喜欢的女生的照片,就可以大胆的撩妹了,哈哈! 想要查看demo,请点击这里,3D transform立方体效果 初识transform 顾名思义:变换.就可以想到它可以做很多很