logo标签列表

使用纯CSS实现点击时的CSS3变换

cssrotationcss-transforms
52

我想让一张图片（一个加号符号）旋转45度，以创建一个十字符号。我目前使用下面的代码已经实现了这个效果，但它只在鼠标悬停时才生效，我想要点击时就旋转。

有没有一种简单的方法可以使用CSS实现？

我的代码如下：

CSS

img {
    display: block;
    margin: 20px;
}

.crossRotate {
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
     transition-duration: 1s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
     transition-property: transform;
}

.crossRotate:hover {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
     transform: rotate(45deg);
}

HTML

<body>
   <img class="crossRotate" src="images/cross.png" alt="Cross Menu button" />
</body>

这里是jsfiddle演示。

8个回答
41

如果你想要一个仅使用CSS的解决方案，你可以使用active

.crossRotate:active {
   transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
}

但是当活动（指网页）移动时，这种转换不会持续存在。为此，您需要javascript（jquery click 和 css 是我个人认为最简洁的方式）。

$( ".crossRotate" ).click(function() {
    if (  $( this ).css( "transform" ) == 'none' ){
        $(this).css("transform","rotate(45deg)");
    } else {
        $(this).css("transform","" );
    }
});

Fiddle


（提示：本段内容为HTML代码，包含一个带有链接的段落标签）
使用jQuery是可以的，我按照您说的做了，它也按照我的意愿工作了。还有一个问题，如果你点击一次，它就会旋转45度，那么如何编写代码使其能够再次点击然后旋转回原来的位置呢？感谢您的帮助。 - user2498890
似乎没有完成，只是在点击时进行了原始的45度旋转。只需要在第一次点击后旋转45度，下一次旋转-45度，然后重复该序列... - user2498890
请再试一次，我在你的fiddle上测试了。确保将类添加到图像中并删除活动的CSS规则。 - jeremyjjbrown
好的，那个功能现在可以按照我的需求运行了，只是需要点击并按住才能实现，我希望只需要点击一次，然后再次点击就能将其返回到 -45 度。感谢您的帮助 :) - user2498890
我基于你的代码添加了一个fiddle。顺便说一句，接受答案可以获得声望。 - jeremyjjbrown
太棒了，我明白了 - 没有意识到CSS已经改变了，我的代码与之冲突。非常感谢你的帮助！ - user2498890
36

方法一：CSS的:focus伪类

作为纯CSS解决方案，你可以通过为图片使用tabindex属性和以下方式使用:focus伪类来实现相似的效果：

<img class="crossRotate" src="http://placehold.it/100" tabindex="1" />

.crossRotate {
    outline: 0;
    /* other styles... */
}

.crossRotate:focus {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

DEMO演示.

注意：使用这种方法，当单击图像时，它会旋转（聚焦），要取消旋转，您需要在图像之外的任何地方单击（模糊）。

方法二：隐藏输入和:checked伪类

这是我最喜欢的方法之一。在此方法中，有一个隐藏的复选框输入和包含图像的<label>元素。

一旦您单击图像，由于使用

因此，通过使用:checked伪类和相邻的兄弟选择器 +，我们可以使图像旋转：

<input type="checkbox" id="hacky-input">

<label for="hacky-input">
  <img class="crossRotate" src="http://placehold.it/100">
</label>

#hacky-input {
  display: none; /* Hide the input */
}

#hacky-input:checked + label img.crossRotate {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

工作演示 #1.

工作演示 #2 (将rotate应用于标签可以提供更好的体验).

方法 #3: 通过JavaScript切换类

如果使用JavaScript/jQuery是一个选项，您可以通过.toggleClass()来切换.active类以触发旋转效果，如下:

$('.crossRotate').on('click', function(){
    $(this).toggleClass('active');
});

.crossRotate.active {
    /* vendor-prefixes here... */
    transform: rotate(45deg);
}

演示链接.

你在任何地方将其投入生产了吗？ - jeremyjjbrown
@jeremyjjbrown，抱歉我不明白你的意思。这是**更新后的演示**。为transform属性添加了-moz前缀。 - Hashem Qolami
我想问你是否愿意在生产环境中使用这个解决方案？我只是好奇。 - jeremyjjbrown
@jeremyjjbrown 我在我的项目中避免旋转图像 :) 我只是想展示 CSS 的能力。 - Hashem Qolami
同意，交换它们可能更清晰。我只是想知道您认为在那种方式中使用tabindex的健壮性如何。 - jeremyjjbrown
使用第二种方法，您可以将输入放在标签内，然后可以简化CSS。 - equaeghe
25

看这里！

div {
  background-color: red;
  color: white;
  font-weight: bold;
  width: 48px;
  height: 48px;  
  transform: rotate(360deg);
  transition: transform 0.5s;
}

div:active {
  transform: rotate(0deg);
  transition:  0s;
}
<div></div>

如果我只想旋转180度怎么办？ - Tmh
2

您还可以使用:target伪类来影响不同的DOM元素。 如果一个元素是锚目标的目的地，它将获得:target伪元素。

<style>
p { color:black; }
p:target { color:red; }
</style>

<a href="#elem">Click me</a>
<p id="elem">And I will change</p>

这是一个fiddle示例： https://jsfiddle.net/k86b81jv/。
1

正如jeremyjjbrow所说，:active 伪类不会持续存在。但是有一个使用纯CSS的技巧可以实现它。您可以将其包装在 <a> 标签中，并在其上应用 :active，就像这样：

<a class="test">
    <img class="crossRotate" src="images/cross.png" alt="Cross Menu button" />
 </a>

还有css：

.test:active .crossRotate {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    }

尝试一下... 它可以工作（至少在Chrome上）！
1
不，只有Chrome... 没注意到。好的决定。 - LcSalazar
只是检查一下，这种东西很容易被烧坏。 - jeremyjjbrown
在 Firefox 上似乎无法工作，但在 Chrome 和 Safari 上可以……在 Firefox 上，您需要点击并保持不放才能完全打开它？ - user2498890
0

请参考这个。

.c-btn:hover,.c-btn-active {
  transform: rotate(45deg);
}
0
你可以结合过渡（transition: all 2s;）使用 WebkitTransform，以实现带有动画的所需旋转。 

<style> 
div.a {
  width: 150px;
  height: 80px;
  background-color: yellow;
  transition: all 2s;
  
}
</style>

<div class="a" id="box">Your Image Here</div>

<button onclick="rotate()">Rotate </button>

<script>

function rotate()
{
   x= document.getElementById("box");
  
  x.style.WebkitTransform = 'rotate(' + 20 +'deg)';
}

</script>

使用这种方法的优点是可以通过编程实现。您可以使用JavaScript指定角度（尽管在您的特定情况下不需要）。
-1

您可以使用JavaScript来实现这一点，使用onClick方法。这可能会有所帮助 CSS3转换点击事件

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接