transform介紹

1、transform基本方法

1.rotate 旋轉(zhuǎn) deg
rotateX/rotateY/rotateZ
2.translate 平移 px 正值向前移動,負值向后移動
translateX/translateY/translateZ
3.skew 斜切 deg
skewX/skew 正值是拉左上角和右下角厦凤,負值拉右上角和左下角
4.scale 縮放(原始大小的多少倍)
scaleX/scaleY
5.perspective 景深
perspective 屬性定義 3D 元素距視圖的距離梦鉴,以像素計。

rotate,skew,scale都是圍繞著元素的中心點進行變化

2筋讨、transform的執(zhí)行順序

transform的執(zhí)行順序赛糟,后寫的動畫先執(zhí)行

3派任、變化原點

transform-origin 變化原點center center。關(guān)鍵字:bottom璧南、top掌逛、center、left司倚,right豆混,長度單位(px、em动知、rem)皿伺,會受到影響的屬性有rotate、skew盒粮、scale

4鸵鸥、3D盒子

制作3D盒子代碼:

<div id="wrap">
  <div id="box">
    <span>前</span>
    <span>右</span>
    <span>后</span>
    <span>左</span>
    <span>上</span>
    <span>下</span>
  <div>
</div>
<style>
#wrap {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  padding: 100px;
  -webkit-perspective: 300px;
  perspective: 300px;
}
#box{
  width: 100px;
  height: 100px;
  color: #fff;
  font-size: 50px;
  line-height: 100px;
  text-align: center;
  position: relative;
  -webkit-transform-style:preserve-3d;
  transform-style:preserve-3d;
  -webkit-transform: translateZ(-50px) rotateY(0deg);
  transform: translateZ(-50px) rotateY(0deg);
  transition:5s;
}
#box span{
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  transition: 5s;
}
#box span:nth-of-type(1){
  background:red;
  -webkit-transform:rotate(0deg) translateZ(50px);
  transform:rotate(0deg) translateZ(50px);
}
#box span:nth-of-type(2){
  background: yellow;
  -webkit-transform: rotateY(90deg) translateZ(50px);
  transform: rotateY(90deg) translateZ(50px);
}
#box span:nth-of-type(3){
  background: blue;
  -webkit-transform: rotateY(180deg) translateZ(50px);
  transform: rotateY(180deg) translateZ(50px);
}
#box span:nth-of-type(4){
  background: green;
  -webkit-transform: rotateY(270deg) translateZ(50px);
  transform: rotateY(270deg) translateZ(50px);
}
#box span:nth-of-type(5){
  background: pink;
  -webkit-transform: rotateX(90deg) translateZ(50px);
  transform: rotateX(90deg) translateZ(50px);
}
#box span:nth-of-type(6){
  background: #000;
  -webkit-transform: rotateX(-90deg) translateZ(50px);
  transform: rotateX(-90deg) translateZ(50px);
}
</style>
<script>
window.onload=function(){
  var box=document.querySelector('#box');
  box.style.WebkitTransform=box.style.transform='translateZ(-50px) rotateY(360deg)';
}
</script>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市丹皱,隨后出現(xiàn)的幾起案子妒穴,更是在濱河造成了極大的恐慌,老刑警劉巖种呐,帶你破解...
    沈念sama閱讀 211,817評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件宰翅,死亡現(xiàn)場離奇詭異弃甥,居然都是意外死亡爽室,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來阔墩,“玉大人嘿架,你說我怎么就攤上這事⌒ン铮” “怎么了耸彪?”我有些...
    開封第一講書人閱讀 157,354評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長忘苛。 經(jīng)常有香客問我蝉娜,道長,這世上最難降的妖魔是什么扎唾? 我笑而不...
    開封第一講書人閱讀 56,498評論 1 284
  • 正文 為了忘掉前任召川,我火速辦了婚禮,結(jié)果婚禮上胸遇,老公的妹妹穿的比我還像新娘荧呐。我一直安慰自己,他們只是感情好纸镊,可當我...
    茶點故事閱讀 65,600評論 6 386
  • 文/花漫 我一把揭開白布倍阐。 她就那樣靜靜地躺著,像睡著了一般逗威。 火紅的嫁衣襯著肌膚如雪峰搪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,829評論 1 290
  • 那天庵楷,我揣著相機與錄音罢艾,去河邊找鬼。 笑死尽纽,一個胖子當著我的面吹牛咐蚯,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播弄贿,決...
    沈念sama閱讀 38,979評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼春锋,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了差凹?” 一聲冷哼從身側(cè)響起期奔,我...
    開封第一講書人閱讀 37,722評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎危尿,沒想到半個月后呐萌,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,189評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡谊娇,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,519評論 2 327
  • 正文 我和宋清朗相戀三年肺孤,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,654評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡赠堵,死狀恐怖小渊,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情茫叭,我是刑警寧澤酬屉,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布,位于F島的核電站揍愁,受9級特大地震影響呐萨,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜莽囤,卻給世界環(huán)境...
    茶點故事閱讀 39,940評論 3 313
  • 文/蒙蒙 一垛吗、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧烁登,春花似錦怯屉、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,762評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至狼牺,卻和暖如春羡儿,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背是钥。 一陣腳步聲響...
    開封第一講書人閱讀 31,993評論 1 266
  • 我被黑心中介騙來泰國打工掠归, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人悄泥。 一個月前我還...
    沈念sama閱讀 46,382評論 2 360
  • 正文 我出身青樓虏冻,卻偏偏與公主長得像,于是被迫代替她去往敵國和親弹囚。 傳聞我的和親對象是個殘疾皇子厨相,可洞房花燭夜當晚...
    茶點故事閱讀 43,543評論 2 349

推薦閱讀更多精彩內(nèi)容

  • CSS里transform變形這個屬性有點學習難度,尤其在CSS3里加上了3D效果之后鸥鹉,2維變3維學習成本更是成倍...
    張歆琳閱讀 27,756評論 5 81
  • 關(guān)于css3變形 CSS3變形是一些效果的集合蛮穿,比如平移、旋轉(zhuǎn)毁渗、縮放和傾斜效果践磅,每個效果都被稱作為變形函數(shù)(Tra...
    hopevow閱讀 6,320評論 2 13
  • 看了很多視頻、文章灸异,最后卻通通忘記了府适,別人的知識依舊是別人的幻碱,自己卻什么都沒獲得。此系列文章旨在加深自己的印象细溅,因...
    DCbryant閱讀 1,857評論 0 4
  • CSS3動畫的屬性主要分為三類:transform、transition以及animation儡嘶。 Transfor...
    may_mico閱讀 11,988評論 1 19
  • 1喇聊、屬性選擇器:id選擇器 # 通過id 來選擇類名選擇器 . 通過類名來選擇屬性選擇器 ...
    Yuann閱讀 1,621評論 0 7