zoukankan      html  css  js  c++  java
  • CSS3 3D立方体效果

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    .wrap{ 200px;height:200px; padding:200px; border:2px solid #000; -webkit-perspective:800px;}
    .box{ 200px;height:200px; position:relative;-webkit-transform-style:preserve-3d; transition:1s all;}
    .box div{ 200px;height:200px; position:absolute; font-size:100px; color:#fff; line-height:200px; text-align:center;}
    .box div:nth-of-type(1){ background:Red;left:0;top:-200px; -webkit-transform-origin:bottom; -webkit-transform:translateZ(100px) rotateX(90deg);}
    .box div:nth-of-type(2){ background:yellow;left:-200px;top:0px; -webkit-transform-origin:right; -webkit-transform:translateZ(100px) rotateY(-90deg);}
    .box div:nth-of-type(3){ background:blue;left:0px;top:0px;-webkit-transform:translateZ(100px);}
    .box div:nth-of-type(4){ background:pink;left:200px;top:0px; -webkit-transform-origin:left; -webkit-transform:translateZ(100px) rotateY(90deg);}
    .box div:nth-of-type(5){ background:green;left:0px;top:200px;-webkit-transform-origin:top; -webkit-transform:translateZ(100px) rotateX(-90deg);}
    .box div:nth-of-type(6){ background:#f60;left:0px;top:0px; -webkit-transform:translateZ(-100px) rotateX(180deg);}
    .wrap:hover .box{ -webkit-transform:rotateX(180deg) rotateY(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>

  • 相关阅读:
    沃尔玛的问题
    为什么没有“128位”的通用处理器
    用户模式驱动模型(UMDF)简介
    Live Space的谢幕
    Cheap HDD bracket
    让 UV4 支持STC 单片机
    SQLServer 分组查询相邻两条记录的时间差
    ERP采购系统流程
    C++运算符的优先级和结合性
    Entity Framework 4.1延时加载与贪婪加载之我的理解和数据库中如何存入图片
  • 原文地址:https://www.cnblogs.com/huangshikun/p/6633184.html
Copyright © 2011-2022 走看看