HTML 幫助（添加圖片和旋轉）

Question

我現在只是自由造型。 我下載了一個免費的 HTML 編輯器，只是在玩。 我真正想做的是添加一張圖片並將其向右旋轉 30 度，添加一個 45 像素的圓角和 20 像素的藍色陰影。

這就是我到目前為止所擁有的，再次我只是自由造型。 我不確定我這樣做是否正確。 這是我第一次玩 HTML ......

  Author: ...
  Date:   04/15/2014

  Filename:         t78.htm
  Supporting files: torte.jpg

-->

    <TITLE> ...???... </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">

<img src="torte.jpg" data-rotate="90">
    <img src="torte.jpg" data-rotate="45">
    <img src="torte.jpg">

Answer 1

看看這個jsfiddle 。 希望這可以幫助。

將此添加到您的 CSS 以進行圖像旋轉

   /* Firefox */
    -moz-transform:rotate(90deg);
    /* Safari and Chrome */
    -webkit-transform:rotate(90deg);
    /* Opera */
    -o-transform:rotate(90deg);
    /* IE9 */
    -ms-transform:rotate(90deg);

這給你的 CSS 以獲取半徑和陰影

 border-radius:45px;
 box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);

Answer 2

您好，您可以使用 CSS 來實現旋轉樣式。

<img class="rotate" img src="torte.jpg" />
<style>
.rotate {

/* Safari */
-webkit-transform: rotate(90deg);

/* Firefox */
-moz-transform: rotate(90deg);

/* IE */
-ms-transform: rotate(90deg);

/* Opera */
-o-transform: rotate(90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}
</style>

Answer 3

看到旋轉你可以使用 jquery 或 CSS ..

讓我們看看如何使用 CSS

檢查鏈接

--CSS--

img
{
    display:block;
    margin:100px;  
    /*set the radius as u want*/
    border-radius:45px;
    /*set the shadow u want*/
    box-shadow:10px 10px 20px blue;
}

-- 聲明一個 css 類順時針旋轉 30 度..

.clock30
{
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
}

檢查鏈接，您將知道如何使用它http://jsfiddle.net/g7FtY/2/