溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“css如何實現以一個點為定點旋轉”，內容詳細，步驟清晰，細節處理妥當，希望這篇“css如何實現以一個點為定點旋轉”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
css以一個點為定點旋轉的方法：1、新建一個HTML文件；2、通過img引入圖片；3、給img標簽添加css屬性為“@keyframes rotate{0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}”即可實現以一個點為定點旋轉。
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 */
}
transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。
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 */
}
transform-origin 屬性允許您改變被轉換元素的位置。
2D 轉換元素能夠改變元素 x 和 y 軸。3D 轉換元素還能改變其 Z 軸。
為了更好地理解 transform-origin 屬性。
Safari/Chrome 用戶：為了更好地理解 transform-origin 屬性用于 3D 轉換的情況。
注釋：該屬性必須與 transform 屬性一同使用。
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如何實現以一個點為定點旋轉”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
