Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.04.2019, 08:09
Профессор
Отправить личное сообщение для Artur_Hopf Посмотреть профиль Найти все сообщения от Artur_Hopf
 
Регистрация: 13.03.2018
Сообщений: 278

Как правильно использовать css transform
Добрый день. Есть такой вот блок:
<div id="graph">
      <canvas class="card shadow" id="chart" width="820" height="600"></canvas>
</div>


Необходимо сделать анимацию при нажатии кнопку, переворота. Как будто написанная на обороте информация отображается после переворота.
Вот тут квадратик при наведении то что нужно:

https://css3playground.com/3d-flip-cards/

Сам я написал вот такую байду. Но это странно отрабатывает, но отрабатывает =)
<style type="text/css">
   .shadow{ 
    border: 1px solid black;
    background: #fc3;
    width="100"; 
    height="100";
   }
  </style>
<div id="graph">
     <canvas class="card shadow" id="chart" width="100" height="100"></canvas>
</div>
<button id="weightTransform">Перевернуть</button>
<script>
var weightTransform = document.getElementById("weightTransform"),
chart = document.getElementById("chart"),
check = 0;

weightTransform.onclick = function() {
     if(check == 0){
        chart.style.transform = 'scaleX(-1)';
        chart.style.transition = 'all 0.7s ease-in-out';
        setTimeout(function() { 
                    createTable();
                }, 700);
       check = 1;
     }else{
         graph.style.transform = 'scaleX(-1)';
         graph.style.transition = 'all 0.7s ease-in-out';
         setTimeout(function() { 
              graph.innerHTML = '<canvas class="card shadow graph-transform" id="chart" width="100" height="100"></canvas>';
              graph.style.transform = 'scaleX(+1)';
         }, 700);
         check = 0;
     }
}

function createTable(){
    var result = '',
    table = '<table class="table table-sm table-bordered text-center">'
                +'<thead class="thead-dark">'
                    +'<tr>'
                        +'<th>1</th>'
                        +'<th>2</th>'
                        +'<th>3</th>'
                    +'</tr>'
                +'</thead>'
            +'</table>';
            result += '<div class="shadow weight-table">'+table+'</div>';
            graph.innerHTML = result;
}

</script>


В общем не то что надо. Подскажите как правильно?
Ответить с цитированием
  #2 (permalink)  
Старый 03.04.2019, 09:41
Профессор
Отправить личное сообщение для Artur_Hopf Посмотреть профиль Найти все сообщения от Artur_Hopf
 
Регистрация: 13.03.2018
Сообщений: 278

Разобрался, нужно было просто добавлять класс =)
var hover = document.getElementById("hover"),
chech = 0;

hover.onclick = function() {
    if(chech == 0){
	this.classList.add("flip");
	chech = 1;
    }else{
	this.classList.remove("flip");
	chech = 0;
     }
}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно сделать анимацию на css? darktowerk56c (X)HTML/CSS 2 03.10.2019 11:07
Как правильно реализовать следующую анимацию на React? gsdev99 Элементы интерфейса 0 23.03.2019 08:50
как правильно использовать .is() JQuery tiho Общие вопросы Javascript 2 09.01.2013 12:17
Как указать из какого css брать стиль? debugx (X)HTML/CSS 1 04.10.2011 10:08
Как правильно очистить maxlength в input? Маэстро Events/DOM/Window 10 22.06.2011 18:14