Поворот блока вокруг своей оси
доброго времени суток.
Нашел вод такой скрипт http://www.xiper.net/examples/html-a...lip-click.html подскажите как сделать так чтобы можно было размещать не один блок а много (20-30). т.е. понятно что у каждого блока будет свой идентификатор. но вот кнопка имеет только один индентификатор "button", вот И скрипту не понятно какой блок повернуть на 180 градусов. а какой оставить нетронутым.
/* 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('card').toggleClassName('flip');
}, false);
}
window.addEventListener( 'DOMContentLoaded', init, false);
такая унификация понадобится многим. Помогите пожалуйста, сам бы сделал но в JS мало что понимаю. |
занятная штука
я попробовал-можно сделать и для нескольких поменять у div вместо id="card" поставить class="card" и соответствующие исправления в javascript и будет работать для нескольких |
Цитата:
А как быть с кнопкой? id="button" всюду будет такой? или id="button1", id="button2" и т.д. |
Цитата:
|
Пожалуйста дайте рабочий код.
спасибо. |
<!DOCTYPE html>
<style>
.container {
margin: 100px auto auto 100px;
position: relative;
width: 190px;
height: 266px;
/* задаем глубину сцене */
-webkit-perspective: 600px; /* webkit */
-moz-perspective: 600px; /* mozilla */
-ms-perspective: 600px; /* IE 10 */
-o-perspective: 600px; /* opera когда-то тоже должна начать понимать */
perspective: 600px; /* св-во по стандатам */
}
#card { /* поворачивать будем общий контейнер */
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
-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 сек */
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d; /* указываем, что дочерние элементы находятся в 3D пространстве */
}
#card.flip { /* добавляя этот класс, поворачивеам контейнер на 180 градусов */
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-ms-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
figure {
width: 100%;
height: 100%;
position: absolute;
display: block;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden; /* если элемент отвернут лицом от пользователя, контент этого элемента не виден */
}
.back {
background: url(http://www.xiper.net/examples/html-and-css-tricks/effects/card-back.png);
}
.front {
background: url(http://www.xiper.net/examples/html-and-css-tricks/effects/card-front.png);
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-ms-transform: rotateY(180deg);
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg ); /* в начальном положении фэйс карты к нам развернут на 180 градусов */
}
</style>
<div class="container">
<div id="card" class=" ">
<figure class="back"></figure>
<figure class="front"></figure>
</div>
</div>
<br /><br />
<div>
<button class="button">Повернуть</button>
<button class="button">Повернуть</button>
<button class="button">Повернуть</button>
</div>
<script>
var clickHandler = function() {
document.getElementById('card').classList.toggle('flip')
}
var buttons = document.getElementsByClassName('button')
Array.prototype.forEach.call(buttons, function(button) {
button.addEventListener('click', clickHandler)
})
</script>
|
| Часовой пояс GMT +3, время: 04:45. |