时间戳

首页 > 解决方案 > 使用 Javascript 旋转 Div

javascript - 使用 Javascript 旋转 Div

问题描述

我需要能够按一个按钮并将菜单旋转一个图标。我知道它必须与翻译有关，但我不确定如何。扩展工作正常，不需要更改。任何建议将不胜感激，css/html 不是我的专长。

var i = 0;

function expand() {
  if (i == 0) {
    document.getElementById("menu").style.transform = 'scale(3)';
    i = 1;
  } else {
    document.getElementById("menu").style.transform = 'scale(0)';
    i = 0;
  }

}
/**
var container = document.getElementById("menu"),
    offset = container.getBoundingClientRect(),
    elements = container.querySelectorAll("li"),
    radius = container.offsetWidth / 2,
    angle = (360 / elements.length) * Math.PI / 180,
    sangle = 40,
    eangle = 40,
    increment = 40;

function moveElements() {
    var x = 0,
        y = 0,
        itemAngle = 0,
        transform = "";

    Array.prototype.forEach.call(elements, function(item, index) {
        itemAngle = index * angle + increment;
        x = radius + Math.cos(itemAngle) * radius;
        y = radius + Math.sin(itemAngle) * radius;
        transform = "translate(" + x + "px, " + y + "px)"
    });

}    
**/
body {
  padding: 0;
  margin: 0;
  background-color: purple;
  overflow: hidden;
}

.toggle {
  background-color: #5990dc;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  position: absolute;
  margin: auto;
  text-align: center;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.fa-plus {
  font-size: 60px;
  color: white;
  position: absolute;
  top: 24px;
  left: 26px;
}

.menu {
  background-color: #ffffff;
  height: 100px;
  width: 100px;
  transform: scale(3);
  border-radius: 50%;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  transition: 1s;
  transform: rotate(0);
  transform: translate(-50%, -50%);
}

.menuitem {
  transform: rotate(0);
}

li {
  display: inline-block;
  position: absolute;
  font-size: 15px;
  color: #bbbbbb;
}

li:nth-child(1) {
  top: 6px;
  left: 45px;
}

li:nth-child(2) {
  top: 24px;
  left: 77px;
}

li:nth-child(3) {
  top: 58px;
  left: 76px;
}

li:nth-child(4) {
  top: 78px;
  left: 42px;
}

li:nth-child(5) {
  top: 58px;
  left: 10px;
}

li:nth-child(6) {
  top: 23px;
  left: 12px;
}

li:hover {
  color: #5990dc;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="toggle" id="toggle" onclick="expand()">
  <i class="fa fa-fplus" aria-hidden="true"></i>
</div>

<div class="menu" id="menu">
  <ul>
    <li><i class="fa fa-microphone" aria-hidden="true" onclick="moveElements()"></i></li>
    <li><i class="fa fa-comments" aria-hidden="true"></i></li>
    <li><i class="fa fa-user" aria-hidden="true"></i></li>
    <li><i class="fa fa-envelope" aria-hidden="true"></i></li>
    <li><i class="fa fa-video-camera" aria-hidden="true"></i></li>
    <li><i class="fa fa-bell" aria-hidden="true"></i>
    </li>
  </ul>
</div>

<div class="but" id="but"></div>

标签： javascripthtmlcssrotationtranslation

解决方案

我不是 100% 确定你想要的结果是什么，但我已经修改了你的代码，如下所示：

.menu{
    background-color: #ffffff;
    height:100px;
    width:100px;
    border-radius:50%;
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:-1;
    transition: transform .8s ease-in-out;
    transform: rotate(180deg);
}

.menu-open {
    transform: scale(3) rotate(0deg);
}

并且还改变了你的js：

if(i==0){
    //document.getElementById("menu").style.transform='scale(3)';
    document.getElementById("menu").classList.add('menu-open');
    i=1;
}else{
    //document.getElementById("menu").style.transform='scale(0)';
    document.getElementById("menu").classList.remove('menu-open');
    i=0;
}

你可以在这里看到结果。它会在旋转 180° 时增加菜单的大小。

推荐阅读