css实现图片旋转，并设置旋转点
這個也卡了我一小會，主要還是因為不是前端的孩子。。。
先做一點技術上的知識普及：
實例
旋轉 div 元素：
div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:rotate(7deg); /* Safari 和 Chrome */ -o-transform:rotate(7deg); /* Opera */ }親自試一試
頁面底部有更多實例。
瀏覽器支持
| ? | ? | ? | ? | ? |
Internet Explorer 10、Firefox、Opera 支持 transform 屬性。
Internet Explorer 9 支持替代的 -ms-transform 屬性（僅適用于 2D 轉換）。
Safari 和 Chrome 支持替代的 -webkit-transform 屬性（3D 和 2D 轉換）。
Opera 只支持 2D 轉換。
定義和用法
transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。
為了更好地理解 transform 屬性，請查看這個演示。
| none |
| no |
| CSS3 |
| object.style.transform="rotate(7deg)" |
語法
transform: none|transform-functions;| none | 定義不進行轉換。 | 測試 |
| matrix(n,n,n,n,n,n) | 定義 2D 轉換，使用六個值的矩陣。 | 測試 |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定義 3D 轉換，使用 16 個值的 4x4 矩陣。 | ? |
| translate(x,y) | 定義 2D 轉換。 | 測試 |
| translate3d(x,y,z) | 定義 3D 轉換。 | ? |
| translateX(x) | 定義轉換，只是用 X 軸的值。 | 測試 |
| translateY(y) | 定義轉換，只是用 Y 軸的值。 | 測試 |
| translateZ(z) | 定義 3D 轉換，只是用 Z 軸的值。 | ? |
| scale(x,y) | 定義 2D 縮放轉換。 | 測試 |
| scale3d(x,y,z) | 定義 3D 縮放轉換。 | ? |
| scaleX(x) | 通過設置 X 軸的值來定義縮放轉換。 | 測試 |
| scaleY(y) | 通過設置 Y 軸的值來定義縮放轉換。 | 測試 |
| scaleZ(z) | 通過設置 Z 軸的值來定義 3D 縮放轉換。 | ? |
| rotate(angle) | 定義 2D 旋轉，在參數中規定角度。 | 測試 |
| rotate3d(x,y,z,angle) | 定義 3D 旋轉。 | ? |
| rotateX(angle) | 定義沿著 X 軸的 3D 旋轉。 | 測試 |
| rotateY(angle) | 定義沿著 Y 軸的 3D 旋轉。 | 測試 |
| rotateZ(angle) | 定義沿著 Z 軸的 3D 旋轉。 | 測試 |
| skew(x-angle,y-angle) | 定義沿著 X 和 Y 軸的 2D 傾斜轉換。 | 測試 |
| skewX(angle) | 定義沿著 X 軸的 2D 傾斜轉換。 | 測試 |
| skewY(angle) | 定義沿著 Y 軸的 2D 傾斜轉換。 | 測試 |
| perspective(n) | 為 3D 轉換元素定義透視視圖。 | 測試 |
?
然后大家在做的時候大多遇到的問題時，這個起始點，也就是旋轉點的問題。我想讓他這樣轉，他為什么就不聽話呢？
這就要說說，transform origin了
實例
設置旋轉元素的基點位置：
div { transform: rotate(45deg); transform-origin:20% 40%;-ms-transform: rotate(45deg); /* IE 9 */ -ms-transform-origin:20% 40%; /* IE 9 */-webkit-transform: rotate(45deg); /* Safari 和 Chrome */ -webkit-transform-origin:20% 40%; /* Safari 和 Chrome */-moz-transform: rotate(45deg); /* Firefox */ -moz-transform-origin:20% 40%; /* Firefox */-o-transform: rotate(45deg); /* Opera */ -o-transform-origin:20% 40%; /* Opera */ }親自試一試
頁面底部有更多實例。
瀏覽器支持
| ? | ? | ? | ? | ? |
Internet Explorer 10、Firefox、Opera 支持 transform-origin 屬性。
Internet Explorer 9 支持替代的 -ms-transform-origin 屬性（僅適用于 2D 轉換）。
Safari 和 Chrome 支持替代的 -webkit-transform-origin 屬性（3D 和 2D 轉換）。
Opera 只支持 2D 轉換。
定義和用法
transform-origin 屬性允許您改變被轉換元素的位置。
2D 轉換元素能夠改變元素 x 和 y 軸。3D 轉換元素還能改變其 Z 軸。
為了更好地理解 transform-origin 屬性，請查看這個演示。
Safari/Chrome 用戶：為了更好地理解 transform-origin 屬性用于 3D 轉換的情況，請查看這個演示。
注釋：該屬性必須與?transform?屬性一同使用。
為了更好地理解 transform 屬性，請查看這個演示。
| 50% 50% 0 |
| no |
| CSS3 |
| object.style.transformOrigin="20% 40%" |
語法
transform-origin: x-axis y-axis z-axis;| x-axis | 定義視圖被置于 X 軸的何處。可能的值：
|
| y-axis | 定義視圖被置于 Y 軸的何處。可能的值：
|
| z-axis | 定義視圖被置于 Z 軸的何處。可能的值：
|
最后，給大家呢演示一個實例demo：
原始圖片為一個黑色正方形，我們希望它根據左上角的頂點進行旋轉：
圖片：
源碼：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">img{margin-top: 200px;margin-left: 500px;width: 100px;height: 100px;display: block;animation: rotate 6s linear infinite;transform-origin:0 0;}@keyframes rotate{0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}</style></head><body><img src="img/圖片.png" /></body> </html>?效果展示：
你自行復制代碼吧。。。！！！?
總結
以上是生活随笔為你收集整理的css实现图片旋转，并设置旋转点的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： git clone拉取太慢怎么办？
- 下一篇： 想成为BAT中的一员，你总要去学点什么（