CSS 3 随机旋转 7 度或 14 度

发布于 2024-12-16 10:27:31 字数 482 浏览 3 评论 0原文

我怎样才能让我的css 3 div随机旋转7度或14度，但如果是14度，它就不能是7度，反之亦然。

我有这样的代码：

.foo {
background:#fefabc;7
-moz-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-o-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
box-shadow: 0px 4px 6px #333;
-moz-box-shadow: 0px 4px 6px #333;
-webkit-box-shadow: 0px 4px 6px #333;
} `

那么，我怎样才能让它随机旋转 14 度，这样它要么是 7 度，要么是 14 度。

我不介意如何做到这一点，只要完成即可。

谢谢，我已经尽力说得尽可能清楚了。

原文

How can I make my css 3 div rotate either 7 degrees or 14 degrees randomnly, but if it is 14 degrees, it can't be 7 degrees and vice versa.

I have this code:

.foo {
background:#fefabc;7
-moz-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-o-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
box-shadow: 0px 4px 6px #333;
-moz-box-shadow: 0px 4px 6px #333;
-webkit-box-shadow: 0px 4px 6px #333;
} `

So, how can I make this rotate 14 degrees randomnly so it is either 7 or 14 degrees.

I don't mind how to do this, as long as it is done.

Thanks, I have tried to be as clear as possible.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

咽泪装欢 2024-12-23 10:27:31

由于 CSS 不是动态语言，因此您必须使用 javaScript 来实现您的目标。但是您需要将样式与 javaScript 代码分开。所以解决方案是：

首先为旋转 7 个或 14 个类创建两个类：

.deg7 {
/*This rotates 7 degree*/
} 

.deg14 {
/*This rotates 14 degree*/
}

然后，加载要旋转的元素并随机添加类名

$('.rotating_element').each(function () {
  $(this).addClass(Math.random() > 0.5 ? 'deg7' : 'deg14');
});

As CSS is not a dynamic language, you have to use javaScript to realize your goals. But you need to separate styles from javaScript Code. So the solution is that:

First you create two classes for both rotating 7 or 14 classes:

.deg7 {
/*This rotates 7 degree*/
} 

.deg14 {
/*This rotates 14 degree*/
}

Then, you load the elements you want to rotate and add the class name randomly

$('.rotating_element').each(function () {
  $(this).addClass(Math.random() > 0.5 ? 'deg7' : 'deg14');
});

回复收藏 0 原文

蒗幽 2024-12-23 10:27:31

我不知道你是否可以只用 CSS 来做到这一点，但如果你也使用 JavaScript 的话。

像这样的东西：

<script language="javascript" type="text/javascript">
function rotate(){
  var deg;
  if(Math.random() * 2 > 1){
   deg= "7deg";
  }else{
   deg= "14deg";
  }
   document.getElementByClass('foo').style.rotate(deg);
}

I dont know if you can do this in just CSS, but if you also use JavaScript.

Something like this :

<script language="javascript" type="text/javascript">
function rotate(){
  var deg;
  if(Math.random() * 2 > 1){
   deg= "7deg";
  }else{
   deg= "14deg";
  }
   document.getElementByClass('foo').style.rotate(deg);
}

回复收藏 0 原文

~没有更多了~