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 */