За последние 24 часа нас посетили 17614 программистов и 1627 роботов. Сейчас ищут 1216 программистов ...

Помогите найти фрагмент с ошибкой

Тема в разделе "HTML и CSS", создана пользователем Walten, 17 ноя 2020.

  1. Walten

    Walten Новичок

    С нами с:
    17 ноя 2020
    Сообщения:
    1
    Симпатии:
    0
    Имеющийся куб покидает пределы видимого пространства, аки вертолет. Подскажите где циферку подправить, чтоб он просто стоял на месте и ворочался(ворочается он уже).

    HTML:
    1. <!DOCTYPE html>
    2.  
    5.  
    6.  
    7.  
    8. </head>
    10.         <div style="text-align:center;padding:10px;">
    11.             <h2>ЁлОчка</h2>
    12.         </div>
    13.         <div class="wrap">
    14.             <div class="cube">
    15.                 <div class="front">
    16.                  
    17.                 </div>
    18.                 <div class="back">
    19.                
    20.                 </div>
    21.                 <div class="top">
    22.          
    23.                 </div>
    24.                 <div class="bottom">
    25.                  
    26.                 </div>
    27.                 <div class="left">
    28.  
    29.                 </div>
    30.                 <div class="right">
    31.                  
    32.                 </div>
    33.             </div>
    34.         </div>
    35.  
    36.    
    37.  
    38.         <style>
    39.             body {
    40.                 background-color: #eee;
    41.             }
    42.  
    43.  
    44.             }
    45.  
    46.             @keyframes bganim {
    47.                 from {
    48.                     background-position: 1px;
    49.                 }
    50.  
    51.                 to {
    52.                     background-position: 0px;
    53.                 }
    54.             }
    55.  
    56.             .cube {
    57.                 margin: auto;
    58.                 position: relative;
    59.                 height: 200px;
    60.                 width: 200px;
    61.                 transform-style: preserve-3d;
    62.             }
    63.  
    64.                 .cube div {
    65.                     position: absolute;
    66.                     margin-top:  300px;
    67.                     padding: 10px;
    68.                     box-sizing: border-box;
    69.                     height: 30%;
    70.                     width: 30%;
    71.                     opacity: 1;
    72.                     background-color: #32CD32;
    73.                     border: solid 1px #32CD32;
    74.                     color: #32CD32;
    75.                     font: 10px arial;
    76.                  
    77.                 }
    78.  
    79.             .front {
    80.                /* transform: translateZ(100px);*/
    81.             }
    82.  
    83.             .back {
    84.                 transform: translateZ(-1px) rotateY(180deg);
    85.             }
    86.  
    87.             .right {
    88.                 transform: rotateY(-270deg) translateX(1px);
    89.                 transform-origin: top right;
    90.             }
    91.  
    92.             .left {
    93.                 transform: rotateY(270deg) translateX(-1px);
    94.                 transform-origin: center left;
    95.             }
    96.  
    97.             .top {
    98.                 transform: rotateX(-270deg) translateY(-1px);
    99.                 transform-origin: top center;
    100.             }
    101.  
    102.             .bottom {
    103.                 transform: rotateX(270deg) translateY(1px);
    104.                 transform-origin: bottom center;
    105.             }
    106.  
    107.             @keyframes rotate {
    108.                 from {
    109.                     transform: rotateX(0deg) rotateY(0deg);
    110.                 }
    111.  
    112.                 to {
    113.                     transform: rotateX(90deg) rotateY(90deg);
    114.                 }
    115.             }
    116.  
    117.             .cube {
    118.                 animation: rotate 20s infinite linear;
    119.             }
    120.  
    121.             /*.wrap:hover .front {
    122.                 /*transform: translateZ(200px);
    123.             }
    124.  
    125.             .wrap:hover .back {
    126.                 transform:  rotateY(180deg);
    127.             }
    128.  
    129.             .wrap:hover .right {
    130.                 transform: rotateY(-270deg) ;
    131.             }
    132.  
    133.             .wrap:hover .left {
    134.                 transform: rotateY(270deg) ;
    135.             }
    136.  
    137.             .wrap:hover .top {
    138.                 transform: rotateX(-270deg) ;
    139.             }
    140.  
    141.             .wrap:hover .bottom {
    142.                 transform: rotateX(270deg) ;*/
    143.             }
    144.         </style>
    145.     </div>
    146.  
    147. </body>
    148. </html>
     
    #1 Walten, 17 ноя 2020
    Последнее редактирование модератором: 17 ноя 2020
  2. MaxChan

    MaxChan Новичок

    С нами с:
    18 ноя 2020
    Сообщения:
    2
    Симпатии:
    0
    Вот это лишнее
    Код (CSS):
    1. .cube div {
    2. margin-top: 300px;
    3. }
    Лучше у заголовка h2 добавьте margin-bottom
     
    #2 MaxChan, 18 ноя 2020
(Вы должны войти или зарегистрироваться, чтобы разместить сообщение.)