精华内容
下载资源
问答
  • css立方体

    2019-12-21 21:23:01
    css立方体 先分别给立方体六个面6个div <div class="cube"> <div class="front">front</div> <div class="back">back</div> <div class="left">left</div> &...

    css立方体

    先分别给立方体六个面6个div

    	<div class="cube">
    		<div class="front">front</div>
    		<div class="back">back</div>
    		<div class="left">left</div>
    		<div class="right">right</div>
    		<div class="top">top</div>
    		<div class="bottom">bottom</div>
    	</div>

    然后css设置六个面的属性:

    .cube {
    			width: 200px;
    			height: 200px;
    			/*border: 1px solid red;*/
    			margin: 200px auto;
    
    			position: relative;
    
    			transform-style: preserve-3d;
    			perspective: 1000px;
    			transform: rotateX(30deg) rotateY(45deg);
    
    
    		}
    
    		.cube:hover{
    			animation: rotate 1s  infinite linear;
    		}
    
    		.cube > div {
    			width: 200px;
    			height: 200px;
    			text-align: center;
    			line-height: 200px;
    			/*background: skyblue;*/
    			/*margin-bottom: 10px;*/
    			opacity: 0.5;
    
    			position: absolute;
    			top: 0;
    			left: 0;
    		}
    
    		.left{
    			background: red;
    			transform: rotateY(90deg);
    			margin-left: -100px;
    		}
    
    		.right {
    			background: orange;
    			transform: rotateY(-90deg);
    			margin-left: 100px;
    		}
    
    		.top {
    			background: yellow;
    			transform: rotateX(90deg);
    			margin-top: -100px;
    		}
    
    		.bottom {
    			background: gray;
    			transform: rotateX(-90deg);
    			margin-top: 100px;
    		}
    
    		.back {
    			background: url("../images/y.jpg");
    			transform: rotateZ(180deg);
    			transform: translateZ(-100px);
    		}
    
    		.front {
    			background: cyan;
    			transform: translateZ(100px);
    		}
    
    		@keyframes rotate{
    			form{
    				transform: rotate3d(0,0,0,0deg);
    			}
    			to{
    				transform: rotate3d(1,1,1,360deg);
    			}
    		}

     

    效果图:

     

    触摸立方体会旋转90度。

    展开全文
  • css 正方体

    2016-08-24 16:20:00
    <!DOCTYPE html><...<head><meta charset="utf-8" /><...transform-style_CSS参考手册_web前端开发参考手册系列</title><meta name="author" content="Joy Du(飘零雾...

    <!DOCTYPE html>
    <html lang="zh-cmn-Hans">
    <head>
    <meta charset="utf-8" />
    <title>transform-style_CSS参考手册_web前端开发参考手册系列</title>
    <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com" />
    <meta name="copyright" content="www.doyoe.com" />
    <style>
    body {
    -webkit-perspective: 1000px;
    perspective: 1000px;
    }
    .cube {
    position: relative;
    font-size: 80px;
    width: 2em;
    margin: 1.5em auto;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateX(-30deg) rotateY(30deg);
    transform: rotateX(-30deg) rotateY(30deg);
    }
    .cube > div {
    position: absolute;
    width: 2em;
    height: 2em;
    background: rgba(0, 0, 0, .1);
    border: 1px solid #999;
    color: white;
    text-align: center;
    line-height: 2em;
    }
    .front {
    -webkit-transform: translateZ(1em);
    transform: translateZ(1em);
    }
    .top {
    -webkit-transform: rotateX(90deg) translateZ(1em);
    transform: rotateX(90deg) translateZ(1em);
    }
    .right {
    -webkit-transform: rotateY(90deg) translateZ(1em);
    transform: rotateY(90deg) translateZ(1em);
    }
    .left {
    -webkit-transform: rotateY(-90deg) translateZ(1em);
    transform: rotateY(-90deg) translateZ(1em);
    }
    .bottom {
    -webkit-transform: rotateX(-90deg) translateZ(1em);
    transform: rotateX(-90deg) translateZ(1em);
    }
    .back {
    -webkit-transform: rotateY(-180deg) translateZ(1em);
    transform: rotateY(-180deg) translateZ(1em);
    }
    </style>
    </head>
    <body>
    <div class="cube">
    <div class="front">1</div>
    <div class="back">2</div>
    <div class="right">3</div>
    <div class="left">4</div>
    <div class="top">5</div>
    <div class="bottom">6</div>
    </div>
    </body>
    </html>

    转载于:https://www.cnblogs.com/y-lin/p/5803456.html

    展开全文
  • html {background:linear-gradient(#9ed128 0%,#358b98 80...height:1000px;opacity:0.8;}.wrapper {margin-top:200px;perspective:1000px;}.cube {height:200px;width:200px;position:relative;margin:auto;transfo...

    html {

    background:linear-gradient(#9ed128 0%,#358b98 80%);

    height:1000px;

    opacity:0.8;

    }

    .wrapper {

    margin-top:200px;

    perspective:1000px;

    }

    .cube {

    height:200px;

    width:200px;

    position:relative;

    margin:auto;

    transform-style:preserve-3d;

    -webkit-animation:rotate 15s infinite;

    -o-animation:rotate 15s infinite;

    animation:rotate 15s infinite 2s;

    }

    @keyframes rotate {

    from {

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

    }

    to {

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

    }

    }.cube>div {

    height:100%;

    width:100%;

    opacity:0.9;

    position:absolute;

    text-align:center;

    background:#333;

    color:#fff;

    line-height:200px;

    font-size:30px;

    }

    .plane-front {

    transform:translateZ(100px);

    }

    .plane-back {

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

    }

    .plane-left {

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

    }

    .plane-right {

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

    }

    .plane-top {

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

    }

    .plane-bottom {

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

    }

    .cube:hover .plane-front {

    transform:translateZ(200px);

    }

    .cube:hover .plane-back {

    transform:rotateY(180deg) translateZ(200px);

    }

    .cube:hover .plane-left {

    transform:rotateY(270deg) translateZ(200px);

    }

    .cube:hover .plane-right {

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

    }

    .cube:hover .plane-top {

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

    }

    .cube:hover .plane-bottom {

    transform:rotateX(270deg) translateZ(200px);

    }

    展开全文
  • CSS立方体旋转动画

    3D立方体旋转动画


    HTML代码如下:

        <div class="cube">
            <div class="boxx1" style="background-color: red;"></div>
            <div class="boxx2" style="background-color: orange;" ></div>
            <div class="boxx3" style="background-color: yellow;"></div>
            <div class="boxx4" style="background-color: yellowgreen;"></div>
            <div class="boxx5" style="background-color: skyblue;"></div>
            <div class="boxx6" style="background-color: purple;"></div>
        </div>
    

    CSS代码如下:

        /* 3D立方体旋转 */
        .cube{
            width: 200px;
            height: 200px;
            margin: 0 auto;
            position: relative;
            /* 设置3D变形效果 */
            transform-style: preserve-3d;
            animation: run-cube 5s linear infinite;
        }
        .cube > div{
            width: 200px;
            height: 200px;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            opacity: 0.8;
        }
        .boxx1{
            transform: rotateY(-90deg) translateZ(100px);
        }
        .boxx2{
            transform: rotateY(90deg) translateZ(100px);
        }
        .boxx3{
            transform: rotateX(-90deg) translateZ(100px);
        }
        .boxx4{
            transform: rotateX(90deg) translateZ(100px);
        }
        .boxx5{
            transform: rotateY(180deg) translateZ(100px);
        }
        .boxx6{
            transform: rotateY(0deg) translateZ(100px);
        }
        @keyframes run-cube {
            from{
                transform: rotateX(0) rotateY(0);
            }
            to{
                transform: rotateY(1turn) rotateZ(1turn);
            }
        }
    
    展开全文
  • html+css立方体旋转展示图片示例demo。
  • #preserve {width:200px;height:200px;transform-style:preserve-3d;position:fixed;top:200px;left:200px;/* transform:rotatey(45deg) rotatex(45deg);*/animation:rotate 5s infinite alternate;...
  • css立方体动画

    2020-03-09 23:21:35
    <div class="box"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li&g...
  • html+css立方体特效

    2019-08-20 15:48:38
    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>长方体特效</title> <style type="text/css"> ul{ ...
  • css正方体旋转

    2019-09-20 15:10:05
    css内容 <style> * { margin: 0; padding: 0; } ._a_ { width: 100%; height: 300px; } .box { width: 200px; height: 200px;...
  • css正方体旋转

    2020-01-06 15:00:04
    CSS #solid { height: 180px; width: 180px; position: relative; margin: 200px auto; transform: rotateX(30deg)rotateY(30deg); transform-style: preserve-3d; animation: name 10s infinite; } @...
  • CSS立方体基础篇之一

    2015-03-17 17:42:02
    花了点时间把CSS3D变形研究了下,做了个立方体的实例。 1. 基础 1.1 理解坐标和旋转 参考资料:http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/ rotateX(angle):...
  • CSS正方体背面不可见

    2020-03-16 19:54:40
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>...style type="text/css"> *{margin: 0;padding: 0;} body{ /*搭建3D环境*/ tr...
  • 一个简单的CSS 正方体制作

    千次阅读 2017-02-20 17:36:45
    test.html<!DOCTYPE html> <title>Title <link rel="stylesheet" href="css/test.css"> <p >kaekeaeaaaaaaaaaaaaaaaaaaaeeee
  • 昨天看过在看完transform后,想做一个正方体的效果。昨天transform的笔记在这里源码在这里可以看到闭眼5秒钟脑子里预演了一遍大概咋写,然后就认为自己已经可以写出来了。今天强迫自己去用手给实现一遍,结果发现...
  • CSS 3D立方体制作

    2021-01-19 18:42:37
    无需JavaScript, imagery, canvas 或者SVG,就可以利用最新的CSS制作出3D立方体,这的确是一件让人难以想象的事情。 目前制作出来的效果,只有Firefox 3.5,Safari 3.2+,Google Chorme支持。下面来为大家列举出相关...
  • css3 立方体

    2018-10-08 16:49:48
    该html代码可以实现立方体,而且该立方体是用纯css3编辑的,还可以旋转。
  • CSS3 立方体

    2015-07-02 10:42:28
    CSS3实现3D立方体动画效果,包括animation,transition,transform等属性的使用。
  • css3制作立方体旋转

    2017-10-31 16:27:15
    css3制作立方体旋转 css3制作立方体旋转 css3制作立方体旋转
  • CSS3立方体旋转发光动画特效是一款纯CSS3制作的3D效果的立方体翻转特效。
  • css3 3d立方体

    2017-01-03 15:35:28
    css3 3d 立方体
  • Css3制作立方体.docx

    2020-03-08 18:13:39
    Css3制作立方体的详细描述。Css3制作立方体的详细描述。Css3制作立方体的详细描述。Css3制作立方体的详细描述。Css3制作立方体的详细描述。Css3制作立方体的详细描述。Css3制作立方体的详细描述。Css3制作立方体的...
  • css3立方体效果

    2018-04-13 11:16:33
    本案例是纯css3编写的一个立方体效果,适合初学者学习css3,欢迎大家下载
  • CSS3立方体3D旋转加载动画,纯CSS3代码,3D立方体组合旋转动画,3D立方体组合旋转拆分动画。
  • CSS3立方体3D旋转加载动画,纯CSS3代码,3D立方体组合旋转动画,3D立方体组合旋转拆分动画。
  • CSS实现立方体

    2020-03-07 16:09:39
    Css制作立方体 这周在逆战班学习了过渡(transition),2D动画(transform),渐变(gradient),以及3D动画特效。让我能够敲出很多很炫很好看的动画特效。今天想讲一下如何制作一个立方体。 首先,一个立方体需要六个面,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,461
精华内容 2,184
关键字:

css立方体