点击使用纯CSS进行CSS3过渡

时间：2014-02-20 20:38:47

标签： css css3 rotation css-transitions transition

我正在尝试将图像（加号）旋转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演示。

6 个答案:

答案 0 :(得分：31)

如果您想要一个仅限css的解决方案，可以使用active 

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

但是当活动开始时，转型不会持续存在。为此你需要javascript（jquery click和css是最干净的IMO）。

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

Fiddle

答案 1 :(得分：27)

方法＃1：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);
}

<强> WORKING DEMO

注意：使用这种方法，图像会旋转（聚焦），以消除旋转，您需要单击图像中的某个位置（模糊）。

方法＃2：隐藏输入＆amp; :checked伪类

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

点击图片后，系统会检查隐藏的输入是因为标签使用了for属性。

因此，通过使用:checked伪类和adjacent sibling selector +，我们可以让图像旋转：

<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);
}

<强> WORKING DEMO #1

WORKING DEMO #2 （将rotate应用于标签可提供更好的体验）。

方法＃3：通过JavaScript切换类

如果使用JavaScript / jQuery是一个选项，您可以按.toggleClass()切换.active类以触发旋转效果，如下所示：

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

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

<强> WORKING DEMO

答案 2 :(得分：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>

这是一个小提琴：https://jsfiddle.net/k86b81jv/

答案 3 :(得分：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上）！

答案 4 :(得分：1)

Voila！

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>

答案 5 :(得分：-1)

您可以使用JavaScript来执行此操作，使用onClick方法。 这可能有助于CSS3 transition click event

相关问题
最新问题