css3的transform屬性
問題描述
當(dāng)你對一個元素進(jìn)行了translateY(10px)操作，再對它進(jìn)行rotateZ(45deg)操作，此時該元素的旋轉(zhuǎn)中心卻是以translateY之前的狀態(tài)作為旋轉(zhuǎn)中心，這是為什么？
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style media="screen"> * {margin: 0; padding: 0;} .b { width: 50px; height: 50px; /*border-radius: 50%;*/ background: #000; position: relative; }; ul { width: 20px; height: 20px; /*background: #fff;*/ position: absolute; top: 50%; left: 50%; margin-top: -10px; margin-left: -10px; } li { width: 20px; height: 2px; background: #fff; position: absolute; top: 50%; margin-top: (-1px); transform: translateY(3.75px); transition: all 1s; } li:nth-child(2) { transform: translateY(-3.75px); } </style> </head> <body> <div class="b"> <ul> <li></li> <li></li> </ul> </div> </body> <script type="text/javascript"> var b = document.querySelector('.b'); var lis = document.querySelectorAll('li'); var bol = false; b.addEventListener('click',function(){ bol = !bol; if(bol) { lis[0].style.transform = 'rotateZ(45deg)'; lis[1].style.transform = 'rotateZ(-45deg)'; } else { lis[0].style.transform = 'rotateZ(0deg)'; lis[1].style.transform = 'rotateZ(0deg)'; } }) </script></html>
問題解答
回答1：都寫在一個transform里
var b = document.querySelector('.b'); var lis = document.querySelectorAll('li'); var bol = false; b.addEventListener('click',function(){ bol = !bol; if(bol) { lis[0].style.transform = 'rotateZ(45deg)'; lis[1].style.transform = 'rotateZ(-45deg)'; } else { lis[0].style.transform = 'translateY(3.75px) rotateZ(0deg)'; lis[1].style.transform = 'translateY(-3.75px) rotateZ(0deg)'; } })
相關(guān)文章：
1. Python爬蟲如何爬取span和span中間的內(nèi)容并分別存入字典里？2. mysql - 把一個表中的數(shù)據(jù)count更新到另一個表里?3. 請教使用PDO連接MSSQL數(shù)據(jù)庫插入是亂碼問題?4. mysql - 分庫分表、分區(qū)、讀寫分離 這些都是用在什么場景下 ，會帶來哪些效率或者其他方面的好處5. visual-studio - Python OpenCV: 奇怪的自動補(bǔ)全問題6. 視頻文件不能播放，怎么辦？7. mysql 查詢身份證號字段值有效的數(shù)據(jù)8. linux - Ubuntu下編譯Vim8（+python）無數(shù)次編譯失敗9. node.js - nodejs開發(fā)中常用的連接mysql的庫10. python - 爬蟲模擬登錄后，爬取csdn后臺文章列表遇到的問題
網(wǎng)公網(wǎng)安備