CSS3 не работает

0

У меня проблема с css3. В настоящее время я следую учебному пособию, когда я тестирую его на своей локальной копии, css3 не читается браузером. вот код:

 <html>
<head>
    <style type="text/css">
        /*custom font - Montserrat*/
        @import url(http://fonts.googleapis.com/css?family=Montserrat);
        /* Background */
        html, body{ min-height: 100%}
        body {
            background: #123;
            background: linear-gradient(#123, #399);
        }
        /*basic reset*/
        * {margin:0; padding: 0;}

        /*Thumbnail BG*/
        .thumb { width: 400px; height: 300px; margin: 70px auto;
                perspective: 1000px;
        }
        .thumb a {
            display: block; width: 100%; height: 100%;
            background: url("http://thecodeplayer.com/u/m/i1.png");

            transform-style: preserve-3d;
            /* hover effect */
            transform: rotateX(80deg); transform-origin:bottom;
        }
    </style>
</head>


<body>
    <div class="thumb">
        <a href="#">
            <!-- LABEL -->
            <span></span>
        </a>
    </div>
</body>

Когда я его тестирую, браузер не просматривает transform-style: preserve-3d детали transform-style: preserve-3d и ниже. Я делаю что-то неправильно? Я использую sublime-text 2, чтобы создать его.

Я использую Chrome ver32 btw.

  • 1
    В каком браузере вы тестируете? Свойство transform-style поддерживается в Firefox. Chrome и Safari поддерживают альтернативное свойство -webkit-transform-style.
  • 0
    caniuse.com/#feat=transforms3d
Показать ещё 7 комментариев
Теги:

4 ответа

1
Лучший ответ

Вам нужно добавить префикс поставщика, и я думаю, что вы хотите, чтобы ваш эффект зависания был выведен в другое правило, см. Этот рабочий пример. Http://plnkr.co/edit/e1WJ5ogErMW6R6TDwX20?p=preview

Поделиться
  • 0
    Этот работал для меня! :)
  • 0
    @ Дон Нет, это не совсем как jsfiddle.net/3q8ZZ
Показать ещё 1 комментарий
1

Вам не хватает части CSS из источника,

Вот демо с полным CSS

@import url(http://fonts.googleapis.com/css?family=Montserrat);
/*basic reset*/
* {margin: 0; padding: 0;}
/*forcing the body to take 100% height*/
html, body {min-height: 100%;}
/*a nice BG*/
body {
    background: #544; /*fallback*/
    background: linear-gradient(#544, #565);
}

/*Thumbnail Background*/
.thumb {
    width: 400px; height: 300px; margin: 70px auto;
    -webkit-perspective: 1000px;
}
.thumb a {
    display: block; width: 100%; height: 100%;
    /*double layered BG for lighting effect*/
    background: 
        linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
        url("http://thecodeplayer.com/u/m/i1.png");
    /*disabling the translucent black bg on the main image*/
    background-size: 0, cover;
    /*3d space for children*/
    -webkit-transform-style: preserve-3d;
    transition: all 0.5s;
}
.thumb:hover a {-webkit-transform: rotateX(80deg); -webkit-transform-origin: bottom;}
/*bottom surface */
.thumb a:after {
    /*36px high element positioned at the bottom of the image*/
    content: ''; position: absolute; left: 0; bottom: 0; 
    width: 100%; height: 36px;
    /*inherit the main BG*/
    background: inherit; background-size: cover, cover;
    /*draw the BG bottom up*/
    background-position: bottom;
    /*rotate the surface 90deg on the bottom axis*/
    -webkit-transform: rotateX(90deg); -webkit-transform-origin: bottom;
}
/*label style*/
.thumb a span {
    color: white; text-transform: uppercase;
    position: absolute; top: 100%; left: 0; width: 100%;
    font: bold 12px/36px Montserrat; text-align: center;
    /*the rotation is a bit less than the bottom surface to avoid flickering*/
    -webkit-transform: rotateX(-89.99deg); -webkit-transform-origin: top;
    z-index: 1;
}
/*shadow*/
.thumb a:before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5); 
    box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
    transition: all 0.5s; 
    /*by default the shadow will be almost flat, very transparent, scaled down with a large blur*/
    opacity: 0.15;
    -webkit-transform: rotateX(95deg) translateZ(-80px) scale(0.75);
    -webkit-transform-origin: bottom;
}
.thumb:hover a:before {
    opacity: 1;
    /*blurred effect using -webkit-box shadow as filter: blur is not supported in all browsers*/
    box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
    /*pushing the shadow down and scaling it down to size*/
    -webkit-transform: rotateX(0) translateZ(-60px) scale(0.85);
}
Поделиться
1

Попробуйте эту ссылку у меня есть подготовленная демонстрация

вместо использования только

 background: linear-gradient(#123, #399);

   Use as below 

  background: -webkit-linear-gradient(#123, #399);
   background: -moz-linear-gradient(#123, #399);
   background: -o-linear-gradient(#123, #399);
   background: linear-gradient(#123, #399);

То же самое для всех других свойств css3.

Подробнее о префиксе поставщика здесь или просто найти его.

Поделиться
  • 0
    Предполагается, что префиксы вендоров идут в linear-gradient , а не в background .
  • 0
    я изменился проверить это ..
0

Попробуй.

  -moz-transform:rotateX(80deg);
  -webkit-transform:rotateX(80deg);
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню