• 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>

    效果图:

  • 相关阅读:
    UI第十七讲.图片异步加载(包括第三方), KVO, KVC
    第二十一讲.UICollectionView(集合视图)以及瀑布流效果, 通知中心(NSNotificationCenter).
    UI第十九讲:数据库
    UI第十八讲.初级数据持久化 (沙盒, 简单写入对象, 归解档, NSUserDefaults写入读取文件 )
    第十四讲(下) 可视化方式的实现通讯录.(及storyboard方式)
    第十六讲.网络编程 (HTTP协议)
    wslgit
    MyBatis时间比较
    layer开启与关闭加载层
    MyBatis中choose when正确写法
  • 原文地址:https://www.cnblogs.com/jiechen/p/5467575.html
Copyright © 2020-2023  润新知