• css3 3D盒子效果


      1 <!DOCTYPE html>
      2 <html>
      3     <head>
      4         <meta charset="utf-8">
      5         <title></title>
      6         <style>
      7             body{
      8                 margin: 0;
      9             }
     10             ul{
     11                 margin: 0;
     12                 padding: 0;
     13                 list-style: none;
     14             }
     15             .wrap{
     16                 width: 198px;
     17                 height: 198px;
     18                 padding: 198px;
     19                 border: 1px solid black;
     20                 margin: 200px auto;
     21                 perspective: 300px;
     22             }
     23             .wrap ul{
     24                 width: 198px;
     25                 height: 198px;
     26                 position: relative;
     27                 transition: 10s;
     28                 transform-style: preserve-3d;
     29                 transform-origin: center center -99px;
     30             }
     31             .wrap ul li{
     32                 width: 198px;
     33                 height: 198px;
     34                 position: absolute;
     35                 font: 50px/100px "微软雅黑";
     36                 text-align: center;
     37                 color: #fff;
     38                 background-image: url(bg.jpg);
     39                 background-repeat: no-repeat;
     40             }
     41             .wrap ul li:nth-of-type(1){
     42                 background-color: red;
     43                 left: 0;
     44                 top: -198px;
     45                 transform-origin: bottom;
     46                 transform: rotateX(90deg);
     47                 background-position: -393px -393px;
     48             }
     49             .wrap ul li:nth-of-type(2){
     50                 background-color: yellow;
     51                 left: -198px;
     52                 top: 0;
     53                 transform-origin: right;
     54                 transform: rotateY(-90deg);
     55                 background-position: 0 -198px;
     56             }
     57             .wrap ul li:nth-of-type(3){
     58                 background-color: blue;
     59                 left: 0;
     60                 top: 0;
     61                 transform: translateZ(0px);
     62                 background-position: -197px -196px;
     63             }
     64             .wrap ul li:nth-of-type(4){
     65                 background-color: green;
     66                 left: 198px;
     67                 top: 0;
     68                 transform-origin: left;
     69                 transform: rotateY(90deg);
     70                 background-position: -393px -196px;
     71             }
     72             .wrap ul li:nth-of-type(5){
     73                 background-color: pink;
     74                 left: 0;
     75                 top: 198px;
     76                 transform-origin: top;
     77                 transform: rotateX(-90deg);
     78                 background-position: -589px -196px;
     79             }
     80             .wrap ul li:nth-of-type(6){
     81                 background-color: purple;
     82                 left: 0;
     83                 top: 0;
     84                 transform: translateZ(-198px);
     85                 background-position: -393px 0;
     86             }
     87             .wrap:hover ul{
     88                 transform:rotateX(720deg) rotateY(720deg) rotateZ(720deg);
     89             }
     90         </style>
     91     </head>
     92     <body>
     93         <div class="wrap">
     94             <ul>
     95                 <li>1</li>
     96                 <li>2</li>
     97                 <li>3</li>
     98                 <li>4</li>
     99                 <li>5</li>
    100                 <li>6</li>
    101             </ul>
    102         </div>
    103     </body>
    104 </html>

    效果图:

  • 相关阅读:
    Using System Partitioning
    startup命令
    [转]Oracle 10g/11g 密码策略 用户口令 大小写敏感
    [转]Oracle DB 加强的数据安全管理
    Scheduling Jobs with Oracle Scheduler
    [转]Oracle DB SQL 计划管理
    Performing Time-Based or Change-Based Incomplete Recovery
    闪回数据归档
    Managing Optimizer Statistics
    性能测试--十个命令迅速发现性能问题
  • 原文地址:https://www.cnblogs.com/jiechen/p/5467575.html
Copyright © 2020-2023  润新知