CSS3 - 3D Cube-IE transform-style：preserve-3d解决方法 [英] CSS3 - 3D Cube- IE transform-style: preserve-3d workaround

查看：363
本文介绍了CSS3 - 3D Cube-IE transform-style：preserve-3d解决方法的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

浏览IE10的开发人员博客我发现他们不支持保存-3d设置。



我发现这个立方体最初是由保罗·海斯制作的，它使用触摸屏非常受欢迎。



Altough preserve-3d设置是一个已知问题，我无法实现建议工作，因为它似乎没有变换属性在父母中适用于子元素。
这里是我到目前为止简化的链接： http://jsfiddle.net/cC4Py/1/



CSS：

  .viewport {
 
透视：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 =cubestyle =transition：500ms; -webkit-transition：500ms;> 
< div> MELABA！< / div> 
< div> 
< h2> 3D cube< / h2> 
< time> 2010年9月28日< / time> 
< p>作者：Paul Hayes< / p> 
< p>使用css，webkit-perspective和webkit-transform构建的3D多维数据集。通过webkit转换进行轮播。< / p> 
< p>使用箭头键进行导航，或者点击并按住鼠标。在触摸屏上，使用一个手指旋转。按ESC重置。< / p> 
< p>< a href =http://www.paulrhayes.com/2010-09/3d-css-cube-ii-touch-gestures-click-and-drag/target = _top>阅读更多»< / a>< / p> 
< / div> 
< div> 
< object width =360height =360>< param name =movievalue =http://www.youtube.com/v/MY5PkidV1cM?fs=1&amp; hl = en_GB& amp; rel = 0>< param name =allowFullScreenvalue =true>< param name =allowscriptaccessvalue =always>< embed src = //www.youtube.com/v/MY5PkidV1cM?fs=1&amp;hl=en_GB&amp=1type =application / x-shockwave-flashallowscriptaccess =alwaysallowfullscreen =truewidth =360height =360> 
< / object> 
< / div> 
< div> 
< h2>< a href =http://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/target =_ top>了解如何制作多维数据集< / a>< / h2> 
< time> 2009年7月17日< / time> 
< p>作者：Paul Hayes< / p> 
< p>一个3D立方体只能在CSS中创建，所有六个面。< / p> 
< p>文章：< a href =http://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/target =_ top >立方体说明< / a>< / p> 
< / div> 
< div> 
< p>我在布莱顿设计和建立网站< / p> 
< / div> 
< div> 
< small>这里没有任何东西。< / 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>

我创建了没有-webkit-前缀的每个属性的副本。我做错了什么？

解决方案

首先，拖动和交互通常意味着JavaScript。是的，有CSS黑客，我已经使用和滥用他们自己，但在这种情况下，绝对疯了不使用JS。



这意味着你需要链接来自祖先的所有变换（这意味着多维数据集本身的旋转和您通常对多维数据集的父级设置的透视图）通过JavaScript链接到多维数据集的表面。



你可以通过几种方式做到这一点。在这种情况下，我使用了face元素的style属性，但您也可以将样式插入样式元素。



无论如何...



演示



相关 HTML ：

  div class ='cube'> 
< div class ='face'>< / div> 
<！ -  five more faces  - > 
< / div>

相关 CSS ：


$ b b

由于我将通过JS更改转换值，我没有在CSS中设置它们。 

  .cube，.cube * {
 position：absolute; 
 top：50％;左：50％; 
} 
 
 .face {
 margin：-8em; 
 width：16em; height：16em; 
}

JS ：



> 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 tmp =（（i <4）？'rotateY（'+ i * 90 +'deg） ：
'rotateX（'+ MathPow（-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 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 '））{
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 _style = faces [i] .style;
tmp = _style.transform || _style [' - webkit-transform'];
styles [i] = tmp.replace ）'，''）;
}
}

flag = false;

window.removeEventListener（'mousemove'，drag，false）;
}，false）;


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&amp;hl=en_GB&amp;rel=0"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed src="http://www.youtube.com/v/MY5PkidV1cM?fs=1&amp;hl=en_GB&amp;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?

解决方案

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...

demo

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);

这篇关于CSS3 - 3D Cube-IE transform-style：preserve-3d解决方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆