CSS3不能正常工作

我對css3有問題。我目前正在學習一個教程，然後當我在本地副本上測試它時，瀏覽器不會讀取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及以下未通過瀏覽器閱讀時，我對它進行測試。難道我做錯了什麼？我使用崇高文本2來創建它。

我使用的是Chrome ver32 btw。

來源

2014-02-18 Don

在哪個瀏覽器中測試？ Firefox中支持轉換樣式屬性。 Chrome和Safari支持另一種-webkit-transform-style屬性。 – 2014-02-18 04:33:52

http://caniuse.com/#feat=transforms3d – Leo

我正在使用'Chrome版本32.0.1700.107m' – Don

您需要添加的供應商名稱，我想你想你的懸停效果拉出到另一個規則，請參見本工作示例http://plnkr.co/edit/e1WJ5ogErMW6R6TDwX20?p=preview

來源

2014-02-18 04:42:45 iamnotsam

這一個爲我工作！ :) – Don

@Don不，這不完全像http://jsfiddle.net/3q8ZZ/ – Sam1604

前綴像-webkit-是我需要的，所以我可以繼續教程：D – Don

Try This Link i have Prepared Demo

，而不是僅僅使用

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財產。

瞭解更多關於供應商前綴here或只是搜索它。

來源

2014-02-18 04:41:40

供應商前綴應該放到['linear-gradient']（https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient），而不是'background'。 – ajp15243

我已經改變檢查它.. –

你缺少從源頭CSS的某些部分，

這裏是一個Demo與完整的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); 
}

來源

2014-02-18 04:48:03 Sam1604

試試吧。

-moz-transform:rotateX(80deg); 
    -webkit-transform:rotateX(80deg);

來源

2014-02-18 05:01:07

CSS3不能正常工作

回答

相關問題