使用rotateY旋转图像

-1

我想旋转一个图像，然后我看到这个视频https://www.youtube.com/watch?v=nD8xqlh6Esk，它给出了一个非常简单的方法来在点击上旋转div。我认为这将是一个很好的方法来旋转页面加载与最小的css图像，所以尝试使用a：after后，而不是：点击（720度），但没有奏效。有没有人有这样的方法来处理页面加载而不是点击？我见过其他方法，但他们需要更多的CSS。使用rotateY旋转图像

提供详细

[显然我的YouTube链接是一场足球比赛，虽然对我来说这是一个的LevelUp TUTS CSS实验＃1 - 卡片翻转效果视频]

基本上，他翻起一卡通过一个简单的上悬停变换如下：

<div class="card"></div> 

.card { 
    background: blue; 
    width: 200px; 
    height: 200px; 
} 
.card:hover { 
    transform: rotateY (90deg); 
}

所以你可以旋转的分度，单行线，变换，上悬停。不需要关键帧。

来源

2014-10-19 PedroKTFC

什么没有工作？告诉我们你做了什么。 – Rudie 2014-10-19 17:42:08

这里有一个非常简单的jfiddle：http：// jsfiddle。net/AB277/89 /。改变：之后：悬停，它会工作。 – PedroKTFC 2014-10-19 17:44:59

'：之后'是一个伪**元素**。 '：hover'是一个状态。他们非常不同。实际上'：在'之后'是'::之后'以区分。 – Rudie 2014-10-19 17:46:32

试试这个：

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
    animation: spin 2s infinite; 
 
    -webkit-animation: spin 2s infinite; 
 
} 
 
@keyframes spin{ 
 
    to{ 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 
@-webkit-keyframes spin{ 
 
to{ 
 
    transform: rotate(360deg); 
 
}

<div id="d"></div>

编辑：是这更像是你想要的吗？

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
    animation: spin 2s forwards; 
 
    -webkit-animation: spin 2s forwards; 
 
} 
 
@keyframes spin{ 
 
    to{ 
 
    transform: rotateY(90deg); 
 
    } 
 
} 
 
@-webkit-keyframes spin{ 
 
to{ 
 
    transform: rotateY(90deg); 
 
} 
 
}

<div id="d"><img src="http://img4.wikia.nocookie.net/__cb20120208185721/logopedia/images/5/54/Barclays_Premier_League_logo_(shield).gif" width="100px" height="100px"></div>

来源

2014-10-19 17:51:44 DividedByZero

但是，只有当我点击元素时才有效。我希望当页面加载而不点击它时发生旋转。 – PedroKTFC 2014-10-19 18:12:25

@PedroKTFC它现在加载时没有javascript – DividedByZero 2014-10-19 18:16:54

除了Chrome！：o）但很好。 – PedroKTFC 2014-10-19 18:28:24

如果您喜欢用户在用光标移入时动画开始，则使用.card:hover而不是.card:after。

http://jsfiddle.net/AB277/90/

.card {margin 20px; 
     background: blue; 
     width: 200px; 
     height:200px; 
     transition: all 5s; 
    } 
    .card:hover { 
     transform: rotateY(720deg); 

    }

或者，如果你想在页面加载动画，使用下面的脚本。

http://jsfiddle.net/AB277/93/

<div id="card" 
</div> 

var elm = document.getElementById('card'); 
elm.classList.add('cardMove'); 


#card {margin 20px; 
    background: blue; 
    width: 200px; 
    height:200px; 
    transition: all 5s; 
} 
.cardMove { 
    transform: rotateY(720deg);   
}

来源

2014-10-19 17:46:45 GibboK

谢谢。我希望能够在没有javascript的情况下做到这一点。 – PedroKTFC 2014-10-19 18:11:37

您需要animation~~为好，不只是transition~~：

http://jsfiddle.net/rudiedirkx/AB277/95/

神奇：

.card { 
    animation: spinn 5s linear infinite; 
    /* you don't need transition at all */ 
} 

@keyframes spinn { 
    0% { transform: rotateY(0deg); } 
    100% { transform: rotateY(720deg); } 
}

出于某种原因，浏览器仍然需要前缀。

More info on css-tricks.

来源

2014-10-19 18:22:32 Rudie

之后转换需要属性更改，完全不需要转换，查看我的答案 – DividedByZero 2014-10-19 18:24:00

是的，我也注意到，当我没有任何转换时左=）傻我 – Rudie 2014-10-19 18:24:48

我没有真正检查你的代码，只是“转换”这个词就够了 – DividedByZero 2014-10-19 18:26:03

这一旦动画对象为CSS和HTML负载：

（http://jsfiddle.net/oemtt7cr/）

@-webkit-keyframes spin { 
 
     from { 
 
     -webkit-transform: rotateY(0deg); 
 
     } 
 
     to { 
 
     -webkit-transform: rotateY(720deg); 
 
     } 
 
    } 
 
    @keyframes spin { 
 
     from { 
 
     transform: rotateY(0deg); 
 
     } 
 
     to { 
 
     transform: rotateY(720deg); 
 
     } 
 
    } 
 
    .container { 
 
     -webkit-perspective: 2000px; 
 
    } 
 
    .card { 
 
     margin: 20px; 
 
     background: #990; 
 
     width: 200px; 
 
     height: 200px; 
 
     animation: spin 5s ease; 
 
     -webkit-animation: spin 5s ease; 
 
    }

<div class="container"> 
 
    <div class="card">flipy</div> 
 
</div>

来源

2014-10-19 18:33:47 siabaJS

使用rotateY旋转图像

回答

相关问题