css3的transform属性
问题描述
当你对一个元素进行了translateY(10px)操作，再对它进行rotateZ(45deg)操作，此时该元素的旋转中心却是以translateY之前的状态作为旋转中心，这是为什么？
<!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)'; } })
相关文章：
1. html5 - 有可以一次性把所有 css外部样式转为html标签内style=" "的方法吗?2. javascript - 原生canvas中如何获取到触摸事件的canvas内坐标?3. javascript - vscode alt+shift+f 格式化js代码，通不过eslint的代码风格检查怎么办。。。4. javascript - 求解答：实例对象调用constructor，此时constructor内的this的指向？5. javascript - [js]为什么画布里不出现图片呢？在线等6. html - vue项目中用到了elementUI问题7. javascript - 如何将一个div始终固定在某个位置；无论屏幕和分辨率怎么变化；div位置始终不变8. java - 如何写一个intellij-idea插件，实现编译时修改源代码的目的9. javascript - 有什么比较好的网页版shell前端组件？10. java 中Long 类型如何转换成Double？
网公网安备