Анимированный поворот вокруг своей оси на CSS3
Дата публикации: 06.09.2012
Поворот элемента по hover
<div class="container"> <figure></figure> </div>
.container {
margin: 100px auto auto 100px;
position: relative;
width: 300px;
height: 200px;
/* задаем глубину сцене */
-webkit-perspective: 600px; /* webkit */
-moz-perspective: 600px; /* mozilla */
-ms-perspective: 600px; /* IE 10 */
-o-perspective: 600px; /* opera когда-то тоже должна начать понимать */
perspective: 600px; /* св-во по стандартам */
-webkit-transition-duration: 0.5s; /* фиксит баг в хроме */
}
.container:hover {
-webkit-perspective: 900px; /* фиксит баг в хроме на пару с предыдущим, значение подбираем вручную (больше, чем начальное) */
}
figure {
width: 100%;
height: 100%;
background: red;
border: 1px solid #000;
position: absolute;
display: block;
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
-ms-transition: -moz-transform 0.5s;
-o-transition: -o-transform 0.5s;
transition: transform 0.5s; /* трансформации будут происходить анимированно продолжительностью 0.5 сек */
}
.container:hover figure{
-webkit-transform: rotateY( 45deg );
-moz-transform: rotateY( 45deg );
-ms-transform: rotateY( 45deg );
-o-transform: rotateY( 45deg );
transform: rotateY( 45deg ); /* поворачиваем фигуру на 45 градусов */
}
CSS поворот по клику
<div class="container"> <figure></figure> </div> <input type="button" value="пуск" id="button" />
.container {
margin: 100px auto auto 100px;
position: relative;
width: 300px;
height: 200px;
/* задаем глубину сцене */
-webkit-perspective: 600px; /* webkit */
-moz-perspective: 600px; /* mozilla */
-ms-perspective: 600px; /* IE 10 */
-o-perspective: 600px; /* opera когда-то тоже должна начать понимать */
perspective: 600px; /* св-во по стандартам */
-webkit-transition-duration: 0.5s; /* фиксит баг в хроме */
}
.container:hover {
-webkit-perspective: 900px; /* фиксит баг в хроме на пару с предыдущим, значение подбираем вручную (больше, чем начальное) */
}
figure {
width: 100%;
height: 100%;
background: red;
border: 1px solid #000;
position: absolute;
display: block;
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
-ms-transition: -moz-transform 0.5s;
-o-transition: -o-transform 0.5s;
transition: transform 0.5s; /* трансформации будут происходить анимированно продолжительностью 0.5 сек */
}
.rotate figure{
-webkit-transform: rotateY( 45deg );
-moz-transform: rotateY( 45deg );
-ms-transform: rotateY( 45deg );
-o-transform: rotateY( 45deg );
transform: rotateY( 45deg ); /* поворачиваем фигуру на 45 гред */
}
/* DOM Utility Functions from PastryKit */
Element.prototype.hasClassName = function (a) {
return new RegExp("(?:^|\s+)" + a + "(?:\s+|$)").test(this.className);
};
Element.prototype.addClassName = function (a) {
if (!this.hasClassName(a)) {
this.className = [this.className, a].join(" ");
}
};
Element.prototype.removeClassName = function (b) {
if (this.hasClassName(b)) {
var a = this.className;
this.className = a.replace(new RegExp("(?:^|\s+)" + b + "(?:\s+|$)", "g"), " ");
}
};
Element.prototype.toggleClassName = function (a) {
this[this.hasClassName(a) ? "removeClassName" : "addClassName"](a);
};
/* /DOM Utility Functions from PastryKit */
var init = function() {
document.getElementById('button').addEventListener( 'click', function(){
document.getElementById('container').toggleClassName('rotate');
}, false);
}
window.addEventListener( 'DOMContentLoaded', init, false);
На момент написания заметки поддержка:
- IE 10
- Firefox
- Safari
- Chrome
- iOs Safari
- Android
Материалы
Показать комментарии