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>

  • 相关阅读:
    flash 显示对象的getRect()方法的问题
    John Maccarthy
    一个c++ 2d图形引擎 AGG
    lisp 编程入门
    linux图形开发工具
    wxDevC++ – Dev C++的愛好者一定要知道的C++ IDE
    备忘 html5 canvas context2d/3d
    windows下使用boost库可以下载编译好的二进制安装包
    酷壳
    [.NET] : Provider Pattern
  • 原文地址:https://www.cnblogs.com/huangshikun/p/6633184.html
Copyright © 2011-2022 走看看