Menu
After looking through IE10's developer blog I have found that they do not support the preserve-3d setting.
I found this cube originally made by Paul Hayes which is working with touch screens and quite popular.
Altough preserve-3d setting is a known issue, I couldn't achieved suggested work around because it seems there is no transform property in the parent to maually apply to the child elements. Here is the link that I simplified so far: http://jsfiddle.net/cC4Py/1/
CSS:
.viewport {
perspective: 800px;
perspective-origin: 50% 200px;
transform: scale(0.75,0.75);
-webkit-perspective: 800;
-webkit-perspective-origin: 50% 200px;
-webkit-transform: scale(0.75,0.75);
-moz-perspective: 800;
-moz-perspective-origin: 50% 200px;
-moz-transform: scale(0.75,0.75);
}
.cube {
position: relative;
margin: 0 auto;
height: 400px;
width: 400px;
transition: transform 50ms linear;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform 50ms linear;
-webkit-transform-style: preserve-3d;
-moz-transition: -moz-transform 50ms linear;
-moz-transform-style: preserve-3d;
}
.cube > div {
position: absolute;
height: 360px;
width: 360px;
padding: 20px;
background-color: rgba(50, 50, 50, 1);
font-size: 1em;
line-height: 1em;
color: #fff;
border: 1px solid #555;
border-radius: 3px;
transition: -webkit-transform 50ms linear;
}
.cube > div:first-child {
transform: rotateX(90deg) translateZ(200px);
-webkit-transform: rotateX(90deg) translateZ(200px);
-moz-transform: rotateX(90deg) translateZ(200px);
}
.cube > div:nth-child(2) {
transform: translateZ(200px);
-webkit-transform: translateZ(200px);
-moz-transform: translateZ(200px);
}
.cube > div:nth-child(3) {
transform: rotateY(90deg) translateZ(200px);
-webkit-transform: rotateY(90deg) translateZ(200px);
-moz-transform: rotateY(90deg) translateZ(200px);
text-align: center;
}
.cube > div:nth-child(4) {
transform: rotateY(180deg) translateZ(200px);
-webkit-transform: rotateY(180deg) translateZ(200px);
-moz-transform: rotateY(180deg) translateZ(200px);
}
.cube > div:nth-child(5) {
transform: rotateY(-90deg) translateZ(200px);
-webkit-transform: rotateY(-90deg) translateZ(200px);
-moz-transform: rotateY(-90deg) translateZ(200px);
}
.cube > div:nth-child(5) p {
text-align: center;
font-size: 2.77em;
margin: 40px;
line-height: 60px;
}
.cube > div:nth-child(6) {
transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
-webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
-moz-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
}
object {
opacity: 0.9;
}
object:hover {
opacity: 1;
}
HTML:
<body class="experiment">
<div class="viewport">
<section class="cube" style="transition: 500ms; -webkit-transition: 500ms;">
<div>MELABA!</div>
<div>
<h2>3D cube</h2>
<time>28th September 2010</time>
<p>By Paul Hayes</p>
<p>3D cube built using css, webkit-perspective and webkit-transform. Rotation via webkit-transition.</p>
<p>Use arrow keys to navigate, or click and hold mouse. On touch screens, use one finger to rotate. Press ESC to reset.</p>
<p><a href="http://www.paulrhayes.com/2010-09/3d-css-cube-ii-touch-gestures-click-and-drag/" target="_top">Read more »</a></p>
</div>
<div>
<object width="360" height="360"><param name="movie" value="http://www.youtube.com/v/MY5PkidV1cM?fs=1&hl=en_GB&rel=0"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed src="http://www.youtube.com/v/MY5PkidV1cM?fs=1&hl=en_GB&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="360" height="360">
</object>
</div>
<div>
<h2><a href="http://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/" target="_top">Learn how to make a cube</a></h2>
<time>17th July 2009</time>
<p>By Paul Hayes</p>
<p>“A 3D cube can be created solely in CSS, with all six faces.”</p>
<p>Article: <a href="http://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/" target="_top">Cube explanation</a></p>
</div>
<div>
<p>I design and build websites in Brighton</p>
</div>
<div>
<small>Nothing down here.</small>
</div>
</section>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://www.paulrhayes.com/experiments/cube-3d/js/experiment.js?13"></script>
</body>
I created copies of every property without -webkit- prefix. Am I doing anything wrong? What should I do next?
939
transform-style: preserve-3d tells the browser that the 3D transformed children of the element it's set on shouldn't be flattened into the plane of their parent (the element we set transform-style: preserve-3d on).
preserve-3d. Specifies that child elements will preserve its 3D position. initial. Sets this property to its default value.
The transform-style property has two values: flat and preserve-3d. If "flat" value is set, the element's children will not exist on their own in the 3D-space.
CSS Demo: transform-style If flattened, the element's children will not exist on their own in the 3D-space. As this property is not inherited, it must be set for all non-leaf descendants of the element.
First of all, dragging and interaction in general usually means JavaScript. Yes, there are CSS hacks and I've used and abused them myself, but in this case it would be absolutely insane not to use JS.
So that means that you need to chain all the transforms from the ancestors (that means the rotation of the cube itself and the perspective you'd normally set on the parent of the cube) onto the faces of the cube via JavaScript.
You can do this in a few ways. In this case, I've used the style property of the face element, but you can also insert the styles into a style element.
Anyway...
Relevant HTML:
<div class='cube'>
<div class='face'></div>
<!-- five more faces -->
</div>
Relevant CSS:
Since I'll be changing transform values via JS, I didn't bother setting them in the CSS.
.cube, .cube * {
position: absolute;
top: 50%; left: 50%;
}
.face {
margin: -8em;
width: 16em; height: 16em;
}
JS:
The code below is quick and dirty and can be improved.
var faces = document.querySelectorAll('.face'),
n = faces.length,
styles = [],
_style = getComputedStyle(faces[0]),
factor = 3,
side = parseInt(_style.width.split('px')[0], 10),
max_amount = factor*side,
unit = 360/max_amount,
flag = false,
tmp, p = 'perspective(32em) ';
for(var i = 0; i < n; i++) {
tmp = ((i < 4) ? 'rotateY(' + i*90 + 'deg)' :
'rotateX(' + Math.pow(-1, i)*90 + 'deg)') +
' translateZ(' + side/2 + 'px)';
faces[i].style.transform = p + tmp;
faces[i].style['-webkit-transform'] = p + tmp;
styles.push(tmp);
}
var drag = function(e) {
var p1 = { 'x': e.clientX - p0.x, 'y': e.clientY - p0.y },
angle = {'x': -p1.y*unit, 'y': p1.x*unit};
for(var i = 0; i < n; i++) {
tmp = 'rotateX(' + angle.x + 'deg)' +
'rotateY(' + angle.y + 'deg)' + styles[i];
faces[i].style.transform = p + tmp;
faces[i].style['-webkit-transform'] = p + tmp;
}
};
window.addEventListener('mousedown', function(e) {
var t = e.target;
if(t.classList.contains('face')){
p0 = { 'x': e.clientX, 'y': e.clientY };
flag = true;
window.addEventListener('mousemove', drag, false);
}
else {
flag = false;
}
}, false);
window.addEventListener('mouseup', function(e) {
if(flag) {
for(var i = 0; i < n; i++) {
_style = faces[i].style;
tmp = _style.transform || _style['-webkit-transform'];
styles[i] = tmp.replace('perspective(32em) ', '');
}
}
flag = false;
window.removeEventListener('mousemove', drag, false);
}, false);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
