滑块点 - css3斜向倾斜它们

Question

是否有css3方法动态地使滑块点在对角线平面上倾斜？

https://jsfiddle.net/9dtgqw95/5/

＆＃13;

＆＃13;

span {
  background: red;
  width: 15px;
  height: 15px;
  border-radius: 15px;
  display: inline-block;
  margin-right: 5px;
}
span:nth-child(n) {
  margin-top: 15px;
}

＆＃13;

<div>
  <span></span><span></span><span></span>
</div>

＆＃13;

＆＃13;

＆＃13;

如果容器被旋转 - 如果有更多的点

会有定位问题

Answer 1

你可以用绝对位置推动它

#include <string>
#include <vector>
#include <functional>

struct Task
{
  std::string Name;

  std::vector<Task*> *Subtasks;
  std::function<void(std::string const &)> Job;

  Task() {}
  Task(std::string const &arg_0) { Name = arg_0; }
  Task(std::string const &arg_0, std::vector<Task*> *arg_1) { Name = arg_0; Subtasks = arg_1; }
  Task(std::string const &arg_0, std::function<void(std::string const &)> arg_1)
  { Name = arg_0; Job = arg_1; }

  ~Task() { for (auto tItem : *Subtasks) { delete tItem; } }
};

class Console
{
private:
  std::vector<Task*> Routine;

public:
  ~Console() { for (auto tItem : Routine) { delete tItem; } } //I thought that this is not needed but Valgrind thinks otherwise, strangely the deconstructors of the Tasks are not called, I guess.

  void add(Task *arg_0) { Routine.push_back(arg_0); }

  void foo()
  {
    Task *tTask = new Task();
    //Task *tTask = new Task("Name");
    //Task *tTask = new Task("Name", [this](std::string const &arg_0){ ; });
   //Seg. fault still remains.
    add(tTask);
  }
};

int main()
{
    Console _Console;
    _Console.foo();
}

div {position:relative;}
span {
  background: red;
  width: 15px;
  height: 15px;
  border-radius: 15px;
  display: inline-block;
  position: absolute;
  top:0;
}
span:nth-child(2) {
  top: 15px;
  left: 15px;
}
span:nth-child(3) {
  top: 30px;
  left: 30px;
}

Answer 2

您可以倾斜容器并以相反的方式扭曲点

div {
    transform: skewY(45deg);
  transform-origin: left top;

}

span {
    transform: skewY(-45deg);
  background: red;
  width: 15px;
  height: 15px;
  border-radius: 15px;
  display: inline-block;
  margin-right: 5px;
}

span:nth-child(n) {
  margin-top: 15px;
}

<div>
  <span></span><span></span><span></span>
</div>