zoukankan      html  css  js  c++  java
  • 用CSS3写一个立方体

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    /*设置300px的景深 景深基点为左侧*/
    .wrap{100px;height:100px;padding:100px; border:5px solid #000; margin:100px auto; -webkit-perspective:300px;-webkit-perspective-origin:left center;}
    /*建立立体空间并设置变换基点在立方体的center处*/
    .box{100px;height:100px;background:red; position:relative; -webkit-transform-style:preserve-3d; transition:2s; -webkit-transform-origin:center center -50px;}
    .box div{100px;height:100px; position:absolute; color:#fff;font-size:50px; text-align:center;line-height:100px;}
    .box div:nth-of-type(1){left:0;top:-100px;background:#9C0; -webkit-transform-origin:bottom; -webkit-transform:rotateX(90deg);}
    .box div:nth-of-type(2){left:-100px;top:0px;background:#CF3; -webkit-transform-origin:right; -webkit-transform:rotateY(-90deg);}
    .box div:nth-of-type(3){left:0px;top:0px;background:#CCF;}
    .box div:nth-of-type(4){left:100px;top:0;background:#0C9;-webkit-transform-origin:left;-webkit-transform:rotateY(90deg);}
    .box div:nth-of-type(5){left:0px;top:100px;background:#69C;-webkit-transform-origin:top;-webkit-transform:rotateX(-90deg);}
    .box div:nth-of-type(6){left:0;top:0;background:#F0C;-webkit-transform:translateZ(-100px) rotateX(180deg);}
    .wrap:hover .box{ -webkit-transform:rotateX(180deg);}
    </style>
    </head>
    <body>
    <div class="wrap">
        <div class="box">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
        </div>
    </div>
    </body>
    </html>
    

      

  • 相关阅读:
    Android 解析内存泄漏
    Maven--几个需要补充的问题(三)
    android编程——百度地图初探
    poj 2752 Seek the Name, Seek the Fame(KMP需转换下思想)
    android面试题之二
    (3)选择元素——(2)文档对象模型(The Document Object Model)
    Tiny4412汇编流水灯代码,Tiny4412裸机LED操作[1]
    A9裸机
    2.1 linux中uboot移植
    芯片结构
  • 原文地址:https://www.cnblogs.com/dreamerC/p/6230600.html
Copyright © 2011-2022 走看看