zoukankan      html  css  js  c++  java
  • 立体正方形的实现

      立体正方形主要涉及到了CSS3的3D,所以需要熟悉这一部分的内容。

      而transform中使用rotate务必牢记一点,即旋转的时候,是旋转的坐标系,所以旋转后的平面相对于它自身的坐标系来说是不变的。这也就是为什么所有的平面都是`translateZ(100px)`的原因。

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <title>Document</title>
     7     <style>
     8         .box {
     9             width: 500px;
    10             height: 500px;
    11             transform-style: preserve-3d;
    12             position: relative;
    13             margin: 200px auto;
    14             transform: rotate3d(1, 1, 1, 15deg);
    15         }
    16 
    17         .minbox {
    18             width: 200px;
    19             height: 200px;
    20             font-size: 40px;
    21             color: #fff;
    22             text-align: center;
    23             line-height: 200px;
    24             background-color: skyblue;
    25             opacity: 0.3;
    26             position: absolute;
    27             top: 0;
    28             left: 0;
    29             border: 1px solid green;
    30         }
    31         .box1 {
    32             transform: translateZ(100px);
    33         }
    34         .box2 {
    35             transform: rotateX(180deg) translateZ(100px);
    36         }
    37         .box3 {
    38             transform: rotateY(-90deg) translateZ(100px);
    39         }
    40         .box4 {
    41             transform: rotateY(90deg) translateZ(100px);
    42         }
    43         .box5 {
    44             transform: rotateX(-90deg) translateZ(100px);
    45         }
    46         .box6 {
    47             transform: rotateX(90deg) translateZ(100px);
    48         }
    49     </style>
    50 </head>
    51 <body>
    52     <div class="box">
    53         <div class="minbox box1"></div>
    54         <div class="minbox box2"></div>
    55         <div class="minbox box3"></div>
    56         <div class="minbox box4"></div>
    57         <div class="minbox box5"></div>
    58         <div class="minbox box6"></div>
    59     </div>
    60 
    61     <script>
    62         obj = document.getElementsByClassName('box')[0];
    63         obj.addEventListener('mouseenter',function(){
    64             this.style.transition = 'all 5s';
    65             this.style.transform = 'rotate3d(1, 1, 1, 300deg)';
    66         });
    67         obj.addEventListener('mouseleave', function(){
    68             this.style.transition = 'all 5s';
    69             this.style.transform = 'rotate3d(1, 1, 1, 15deg)';
    70         });
    71     </script>
    72 </body>
    73 </html>

  • 相关阅读:
    HDU 1016 Prime Ring Problem
    CreateRemoteThread函数多參数传入用法
    Dynamics CRM2015 on-premises直接升级Dynamics CRM2016 on-premises
    cocos2d-x+lua代码热载入(Hot Swap)的研究
    DirectX 9.0c游戏开发手记之“龙书”第二版学习笔记之8: Chap10: Lighting
    js合并table单元格(拼table的时候并不知道详细几行几列)
    简单图模板 Graph
    POJ-3278-Catch That Cow-广搜(BFS)
    android用存到缓存的方法来保存ListView里的数据
    Ubuntu 14.10中连接Win10的smb共享文件
  • 原文地址:https://www.cnblogs.com/littleppig/p/13417365.html
Copyright © 2011-2022 走看看