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>

  • 相关阅读:
    项目包结构
    准备dbcp2-2.1.1和pool2-2.4.2 、commons-dbcp-1.4jar包
    导入javax.servlet。伺服登记无法解决:The import javax.servlet.MultipartConfigElement cannot be resolved
    准备mysql-connector-java
    准备mybatis-spring
    准备spring
    准备MyBatis
    vim编辑器使用
    jquery怎样做出分页效果
    快速入门系列--WCF--02消息、会话与服务寄宿
  • 原文地址:https://www.cnblogs.com/huangshikun/p/6633184.html
Copyright © 2011-2022 走看看