使旋转的中心点在中心
Make center point of rotation in center
我正在尝试用动画旋转一个元素。我能够成功地实现这一点,但问题是,当它旋转时,div
中的文本不会从中间旋转,所以它有点不稳定。
如何使旋转的中心点位于div
的中间?
JSFiddle
var container = document.getElementById('container'),
buttonContainer = document.getElementById('buttonContainer'),
button = document.getElementById('button');
buttonContainer.addEventListener('click', expandElem);
function expandElem(e) {
toggleClass(button, 'expand');
}
function hasClass(ele, cls) {
return ele.className.match(new RegExp('(''s|^)' + cls + '(''s|$)'));
}
function addClass(ele, cls) {
if (!hasClass(ele, cls)) ele.className += " " + cls;
}
function removeClass(ele, cls) {
if (hasClass(ele, cls)) {
var reg = new RegExp('(''s|^)' + cls + '(''s|$)');
ele.className = ele.className.replace(reg, function(match) {
if (match.match(/^'s.+'s$/) !== null) return ' ';
else return '';
});
}
}
function toggleClass(element, className) {
if (!element || !className) return;
if (hasClass(element, className)) removeClass(element, className);
else addClass(element, className);
}
#buttonContainer {
cursor: pointer;
width: 100px;
height: 100px;
font-size: 20px;
font-weight: bold;
margin: auto;
color: white;
}
#button {
width: 60px;
height: 60px;
line-height: 60px;
font-size: 50px;
display: inline-block;
transform: rotate(0deg);
transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
#button.expand {
transform: rotate(630deg);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
#container {
margin: auto;
top: 5vh;
background-color: #03A9F4;
border-radius: 25px;
width: 100px;
max-width: 100px;
height: 100px;
text-align: center;
transition: all 0.2s 0.45s, height 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.25s, max-width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.35s, width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.35s;
}
<div id="container">
<div id="buttonContainer">
<span id="button">🕓</span>
<span id="title">History</span>
</div>
</div>
线高:63.5px;给你4像素顶部4像素底部用photoshop测量。
相关文章:
- 如何在所有ng点击事件AngularJS上启动一个方法
- 在容器中心滚动时淡出
- 推特引导:弹出窗口不会在第一次点击时出现,但会在第二次点击时显示
- on(“点击”)仅在第二次点击后触发
- 用angular js在屏幕上点击播放和暂停html5视频
- 在一次点击中发布到两个表单 JavaScript
- twitter引导崩溃在第一次点击后停止工作
- 将 ajax 加载图像驻扎在页面中心
- 如何使弹出窗口在屏幕中心和覆盖/背景到全屏高
- 调整浏览器大小后,将网站上的旋转木马保持在页面中心
- 谷歌地图API v3:在保持中心点固定的情况下,使地图适应标记
- 试图将JS弹出窗口放置在页面中心
- 密码请求窗口不会在屏幕中心:(
- 加载后如何在中心中心或特定高度开始页面
- 如何使用javascript显示在正文中心对齐的多个图像
- setCenter()在谷歌地图API改变中心在地图上点击按钮后
- 在svg中心点获取问题
- 谷歌地图:自定义标记图标-不在矩形中心绘制
- 弹出窗口不在屏幕中心- CSS问题
- 鼠标悬停时在图像中心显示图标字体