css3屬性transform-origin屬性講解

vibiu 發(fā)布于2019-08-29 17:21 / 3533人閱讀

摘要：是里的變換屬性，常用的有平移旋轉(zhuǎn)傾斜縮放方法。默認情況下，元素的動作參考點為元素盒子的中心。語法默認值，效果等同于適用于所有塊級元素及某些內(nèi)聯(lián)元素取值用百分比指定坐標值。該屬性提供個參數(shù)值。對應的腳本特性為。

transform是CSS3里的變換屬性，常用的有translate（平移）、rotate（旋轉(zhuǎn)）、skew(傾斜)、scale(縮放)方法。而transform-origin并不是transform的屬性值，其具有獨立的語法，但值得注意的是，transform-origin必須配合transform來使用，這個從名字也可以看得出來，就是給transform設置的各種動作設置一個參考點。默認情況下，元素的動作參考點為元素盒子的中心。transform可以設置九個位置的值，水平方向有l(wèi)eft | center | right 三個值，垂直方向也有三個，分別是 top | center |bottom ，故一共有九個。

語法：

默認值：50% 50%，效果等同于center center

適用于：所有塊級元素及某些內(nèi)聯(lián)元素

取值：

：用百分比指定坐標值?？梢詾樨撝怠?/p>

：用長度值指定坐標值?？梢詾樨撝怠?/p>

left：指定原點的橫坐標為left

center①：指定原點的橫坐標為center

right：指定原點的橫坐標為right

top：指定原點的縱坐標為top

center②：指定原點的縱坐標為center

bottom：指定原點的縱坐標為bottom

說明：

設置或檢索對象以某個原點進行轉(zhuǎn)換。

該屬性提供2個參數(shù)值。

**- 如果提供兩個，第一個用于橫坐標，第二個用于縱坐標。

如果只提供一個，該值將用于橫坐標；縱坐標將默認為50%。**

對應的腳本特性為transformOrigin。

兼容性：

transform屬性

默認情況，變形的原點在元素的中心點，或者是元素X軸和Y軸的50%處，如下圖所示：

我們沒有使用transform-origin改變元素原點位置的情況下，CSS變形進行的旋轉(zhuǎn)、移位、縮放等操作都是以元素自己中心（變形原點）位置進行變形的。但很多時候需要在不同的位置對元素進行變形操作，我們就可以使用transform-origin來對元素進行原點位置改變，使元素原點不在元素的中心位置，以達到需要的原點位置。

看上去transform-origin取值與background-position取值類似。為了方便記憶，可以把關鍵詞和百分比值對比起來記：

top = top center = center top = 50% 0

right = right center = center right = 100%或(100% 50%)

bottom = bottom center = center bottom = 50% 100%

left = left center = center left = 0或(0 50%)

center = center center = 50%或（50% 50%）

top left = left top = 0 0

right top = top right = 100% 0

bottom right = right bottom = 100% 100%

bottom left = left bottom = 0 100%

為了讓大家能一眼看明白，下面截圖以transform中的旋轉(zhuǎn)rotate()為例，并transform-origin取值不一樣時的效果：
transform-origin取值為center（或center center或50% 或50% 50%）：

transform-origin取值為top（或top center或center top或50％ 0）：

transform-origin取值為right(或right center 或center right 或 100％或 100％ 50％)：

transform-origin取值為bottom(或bottom center 或center bottom 或 50％ 100％)：

transform-origin取值為left(或left center或center left或0或0 50％):

transform-origin取值為top left(或left top或0 0)：

transform-origin取值為right top（或top right或100％ 0）：

transform-origin取值為bottom right（或right bottom或100％ 100％）:

transform-origin取值為left bottom（或bottom left 或 0 100％）:

參考文章：http://www.w3cplus.com/css3/t...

實例：擺動的小球（鐘擺效果）

從上圖中可以看出，小球擺動效果運用了動畫原理，以及transform-origin原理（很重要）。首先，先確定好球的變形中心點，然后在添加動畫效果。

原理圖：

.sphere {
    width: 60px;
    height: 60px;
    background: #9485FD;
    border-radius: 100%;
    margin: 280px auto;
    background: radial-gradient(circle at top center, #c6bff6, #6959d8, #372a91);
    transform-origin: center -200px;
    animation: clock 4s infinite linear;
    position: relative;
}

.sphere::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 1px;
    height: 200px;
    border-left: 1px #9485FD dashed;
}

@keyframes clock {
    0% {
        transform: rotate(0deg)
    }
    25% {
        transform: rotate(30deg)
    }
    50% {
        transform: rotate(0deg)
    }
    75% {
        transform: rotate(-30deg)
    }
    100% {
        transform: rotate(0deg)
    }
}

GPU云服務器云服務器刪除屬性設置屬性屬性編號屬性遍歷

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114264.html

css3屬性transform-origin屬性講解

摘要：是里的變換屬性，常用的有平移旋轉(zhuǎn)傾斜縮放方法。默認情況下，元素的動作參考點為元素盒子的中心。語法默認值，效果等同于適用于所有塊級元素及某些內(nèi)聯(lián)元素取值用百分比指定坐標值。該屬性提供個參數(shù)值。對應的腳本特性為。 transform是CSS3里的變換屬性，常用的有translate（平移）、rotate（旋轉(zhuǎn)）、skew(傾斜)、scale(縮放)方法。而transform-origin并...

sanyang 2019-08-02 12:04 評論0 收藏0
CSS3轉(zhuǎn)換過渡動畫

摘要：轉(zhuǎn)換能夠?qū)υ剡M行移動縮放轉(zhuǎn)動拉長或拉伸。和和的參數(shù)可以為。過渡該屬性和配合使用，實現(xiàn)鼠標移入動畫效果。實例動畫該屬性和配合使用。規(guī)則用于創(chuàng)建動畫。在中規(guī)定某項樣式，就能創(chuàng)建由當前樣式逐漸改為新樣式的動畫效果。 CSS3中有三個屬性：transform、transition、animation，一直容易搞混，今天特意拎出來理一理。 transform 轉(zhuǎn)換 transform 能夠?qū)υ?..

MonoLog 2019-08-29 12:14 評論0 收藏0
css3中的變形（transform）、過渡（transition）、動畫（animation）屬性

摘要：中制作動畫的幾個屬性中的變形過渡動畫。默認值為，為時，表示變化是瞬時的，看不到過渡效果。實現(xiàn)動畫效果主要由兩部分組成通過類似動畫中的幀來聲明一個動畫在屬性中調(diào)用關鍵幀聲明的動畫。 css3中制作動畫的幾個屬性：css3中的變形（transform）、過渡（transition）、動畫（animation）。一、 CSS3變形（transform）語法： transform ： no...

waruqi 2019-08-30 10:51 評論0 收藏0
Css3 筆記動畫和定位屬性

摘要：屬性決定元素如何定位，通過實現(xiàn)位置的改變默認值，元素按照標準流的方式正常排列。絕對定位，不受父元素父容器限制。可以設置元素的疊加順序，但依賴定位屬性大的元素會覆蓋小的元素為的元素不參與層級比較為負值，元素被普通流中的元素覆蓋? transform 變形屬性屬性：translate 平移，rotate 旋轉(zhuǎn), scale 縮放,skew 傾斜 ◆ translate :指定對象的2D平移第一個...

Tony_Zby 2019-04-23 11:43 評論0 收藏0
CSS3 變換

摘要：概覽變換也叫轉(zhuǎn)換，主要包括以下幾種旋轉(zhuǎn)扭曲縮放和移動以及矩陣變形。變換沒有扭曲操作，有移動，旋轉(zhuǎn)，縮放。三，取消的變換，將變換應用到上并置于縮放前，改變縮放值，沒有任何變化。概覽 CSS3 變換也叫 2D/3D轉(zhuǎn)換，主要包括以下幾種：旋轉(zhuǎn)(rotate) 、扭曲 (skew) 、縮放(scale) 和移動(translate) 以及矩陣變形(matrix) 。transform ...

wayneli 2019-08-28 18:22 評論0 收藏0