CSS旋轉圖像不起作用

Question

所以一段時間以來，我一直在嘗試在css中旋轉jpeg圖像。 該圖像位於ap標簽內。 我想做的是旋轉圖像，並且我希望文本文件包裝圖像而不要觸摸它。 我設法完成了包裹部分，但是由於某些奇怪的原因，當我嘗試旋轉圖像時，它只會旋轉圖像的背景。 實際圖像沒有旋轉。 這是html代碼：

   <p><img src="Image.jpg" alt = "A picture of Jose"> 
      Some text
   </p>

    p img{
        float: right;
        margin-left: 10px;
        margin-bottom: 10px;
        overflow: hidden;
        width: 200px;
        height: auto;
        -ms-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        transform: rotate(90deg);
        position: relative;
        display: block;
    }

Answer 1

正如David Wilkinson所寫，CSS僅支持/ * ... * /注釋，而不支持//，因此，如果您使用最后一個，它將破壞樣式。 試試這個：

    /* Here is the CSS */
    p img{
        float: right;
        margin-left: 10px;
        margin-bottom: 10px;
        overflow: hidden;
        width: 200px;
        height: auto;
        -ms-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        transform: rotate(90deg);
        position: relative;
        display: block;
    }

Answer 2

您的代碼正在運行，只不過您使用的//Here is the css:供注釋而不是/*Here is the css*/

如果要檢查，請嘗試使用如下代碼

<style>
p img{
    float: right;
    margin-left: 10px;
    margin-bottom: 10px;
    overflow: hidden;
    width: 200px;
    height: auto;
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
    position: relative;
    display: block;
}

// Here is the CSS:
</style>

現在，此代碼將起作用，但是// Here is the CSS:之后的任何其他css代碼將不起作用。 所以對於CSS中的注釋，請使用此/* css comment */