Создание вращающегося 3d-блока с помощью CSS transitions и Javascript

#javascript #html #css #css3 #анимация

Я экспериментировал с CSS, пытаясь создать 3d box, в котором  можно выбрать передний
план фигуры с помощью javascript.
Он просто меняет имя класса box divs и использует свойство transition для плавного
перехода между  разными местоположениями объекта.    

Здесь ссылка на jsfiddle с работающим примером http://jsfiddle.net/synthet1c/VdDmA/1/
     

В настоящий момент это выглядит круто, но это не совсем так, как я хочу ...
Кто-нибудь знает, как я могу сохранять правильную позицию box , когда он проходит
через  transition?     

В настоящее время, если face куба поворачивается  от 360 градусов до 90 градусов,
то face будет вращаться на 270 градусов в неправильном направлении.
Я понимаю, почему так происходит, но не могу решить проблему.
Я добавил все префиксы браузеров, но использовал его только в Firefox.     



var id = function(elem){
    var theId = document.getElementById(elem);
    return theId;
}

function button1(){
    id('front').className = 'front';
    id('right').className = 'right';
    id('back').className = 'back';
    id('left').className = 'left';
}

function button2(){
    id('front').className = 'right';
    id('right').className = 'back';
    id('back').className = 'left';
    id('left').className = 'front';
}   

function button3(){
    id('front').className = 'back';
    id('right').className = 'left';
    id('back').className = 'front';
    id('left').className = 'right';
}   

function button4(){
    id('front').className = 'left';
    id('right').className = 'front';
    id('back').className = 'right';
    id('left').className = 'back';
}   
.right{
    transform: rotateY(90deg) translatez(75px) translatex(-75px);
    transition: all 4s;
}

.back{
    transform: rotateY(180deg) translatez(0px) translatex(0px);
    transition: all 4s;
}

.left{
    transform: rotateY(270deg) translatez(75px) translatex(70px);
    transition: all 4s;
}

.front{
    transform: rotateY(0deg) translatez(150px) translatex(0px);
    transition: all 4s;
}

    
    
    
    


    
Front
    
Back
    
Right
    
Left




    

Ответы

Ответ 1

Pure CSS

Кроме того, вы можете делать вращающийся 3D-блок с чистым CSS. Тем не менее, проблема
вращения> 180 ° может быть решена только с помощью JavaScript. 



body { padding: 5em 0 0; perspective: 45em; }
.faceopt {
	position: absolute;
	visibility: hidden;
	z-index: -1;
}
.faceopt + label {
	display: inline-block;
	padding: .25em 1em;
	border-radius: .5em;
	box-shadow: 0 1px 0 black, 0 -1px 0 #96d1f8;
	background: #65a9d7 linear-gradient(top, #3e779d, #65a9d7);
	color: white;
	font: 1em Century Gothic, Verdana, sans-serif;
	text-shadow: 0 1px 0 black;
	transition: .5s;
	cursor: pointer;
}
.faceopt + label:hover, .faceopt:checked + label { color: yellow; }
.house {
	margin: 5em auto;
	transform-style: preserve-3d;
	transition: transform 1s;
}
.house, .face { width: 10em; height: 10em; }
.face {
	box-sizing: border-box;
	position: absolute;
	padding: 1em;
}
.front { transform: translateZ(5em); background: rgba(255, 165, 0, .75); }
.back { 
	transform: rotateY(180deg) translateZ(5em);
	background: rgba(30, 144, 255, .75);
}
.right {
	transform: rotateY(90deg) translateZ(5em);
	background: rgba(220, 20, 60, .75);
}
.left {
	transform: rotateY(-90deg) translateZ(5em);
	background: rgba(127, 255, 0, .75);
}
#left:checked ~ .house { transform: rotateY(90deg); }
#back:checked ~ .house { transform: rotateY(180deg); }
#right:checked ~ .house { transform: rotateY(-90deg); }

Front

Left

Back

Right

	
Front
	
Back
	
Right
	
Left



Ответ 2

На самом деле это довольно просто.  

Вам просто нужно сделать проверку, чтобы узнать, будет ли разница, назовем ее dif,
по абсолютной величине между углом, в котором вы сейчас находитесь, и углом, который
вы хотите получить,-  более 180°, и если это так, то вы поворачиваете на 360°, минус
разность по абсолютной величине. Направление вращения определяется знаком dif.      

Я также внес некоторые изменения в CSS, и если вы хотите больше узнать о том, как
создать реалистичный куб, вы можете изучить мой (действительно) подробный ответ на
аналогичный вопрос.     



(function() {
	var btnsEl = document.querySelector('.buttons'), currentAngle = 0;
	btnsEl.addEventListener('click', function(e) {
		var b = e.target.innerHTML.toLowerCase(), 
			house = document.querySelector('.house'), 
			btns = {'front': 0, 'left': 90, 'back': 180, 'right': -90}, 
			dif = btns[b] - currentAngle%360;
		if(!e.target.classList.contains('btn') || dif === 0) return;
		currentAngle += (Math.abs(dif) > 180) ? 
						(Math.abs(dif) - 360)*Math.abs(dif)/dif : 
						dif;
		house.style['-webkit-transform'] = 'rotateY(' + currentAngle + 'deg)';
		house.style['transform'] = 'rotateY(' + currentAngle + 'deg)';
	}, false); 
}());
body { padding: 5em 0 0; perspective: 45em; }
button { cursor: pointer; }
.house { 
	position: relative;
	margin: 2em auto;
	transform-style: preserve-3d;
	transition: transform 1s;
}
.house, .face { width: 10em; height: 10em; }
.face {
	box-sizing: border-box;
	position: absolute;
	padding: 1em;
}
.front { transform: translateZ(5em); background: rgba(255, 165, 0, .75); }
.back { 
	transform: rotateY(180deg) translateZ(5em);
	background: rgba(30, 144, 255, .75);
}
.right {
	transform: rotateY(90deg) translateZ(5em);
	background: rgba(220, 20, 60, .75);
}
.left {
	transform: rotateY(-90deg) translateZ(5em);
	background: rgba(127, 255, 0, .75);
}

    
    
    
    


    
Front
    
Back
    
Right
    
Left



    

demo