- 首页
- 前端开发
- CSS3 - 3D Cube- IE 变换样式:保留 3d 解决方法
CSS3 - 3D Cube- IE 变换样式:保留 3d 解决方法
[英] CSS3 - 3D Cube- IE transform-style: preserve-3d workaround
本文介绍了CSS3 - 3D Cube- IE 变换样式:保留 3d 解决方法的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
浏览 IE10 的 开发者博客我发现他们不支持preserve-3d设置.
我发现这个立方体最初是由 Paul Hayes 制作的，它可以与触摸屏配合使用并且很受欢迎.
尽管preserve-3d 设置是一个已知问题，但我无法实现建议的解决方法，因为父元素中似乎没有可手动应用于子元素的转换属性.这是我到目前为止简化的链接:http://jsfiddle.net/cC4Py/1/
CSS:
.viewport {视角:800px；透视原点:50% 200px；变换:比例(0.75,0.75)；-webkit-透视:800；-webkit-perspective-origin: 50% 200px;-webkit-transform: scale(0.75,0.75);-moz-透视:800；-moz-perspective-origin: 50% 200px;-moz 变换:比例(0.75,0.75)；}.cube {位置:相对；边距:0 自动；高度:400px；宽度:400px；过渡:变换 50ms 线性；变换风格:preserve-3d；-webkit-transition: -webkit-transform 50ms 线性；-webkit-transform-style: 保留-3d；-moz-transition: -moz-transform 50ms 线性；-moz-transform-style: 保留 3d；}.cube >div {位置:绝对；高度:360px；宽度:360px；填充:20px；背景颜色:rgba(50, 50, 50, 1);字体大小:1em；行高:1em；颜色:#fff;边框:1px 实心 #555；边框半径:3px；转换:-webkit-transform 50ms 线性；}.cube >div:第一个孩子{变换:rotateX(90deg) translateZ(200px);-webkit-transform:rotateX(90deg) translateZ(200px);-moz-transform:rotateX(90deg) translateZ(200px);}.cube >div:第n个孩子(2){变换:translateZ(200px);-webkit-transform: translateZ(200px);-moz-transform: translateZ(200px);}.cube >div:第n个孩子(3){变换:rotateY(90deg) translateZ(200px);-webkit-transform:rotateY(90deg) translateZ(200px);-moz-transform:rotateY(90deg) translateZ(200px);文本对齐:居中；}.cube >div:第n个孩子(4){变换:rotateY(180deg) translateZ(200px);-webkit-transform:rotateY(180deg) translateZ(200px);-moz-transform:rotateY(180deg) translateZ(200px);}.cube >div:nth-child(5) {变换:rotateY(-90deg) translateZ(200px);-webkit-transform:rotateY(-90deg) translateZ(200px);-moz-transform:rotateY(-90deg) translateZ(200px);}.cube >div:nth-child(5) p {文本对齐:居中；字体大小:2.77em；边距:40px；行高:60px；}.cube >div:第n个孩子(6){变换:rotateX(-90deg)rotate(180deg)translateZ(200px);-webkit-transform:rotateX(-90deg)rotate(180deg)translateZ(200px);-moz-transform:rotateX(-90deg)rotate(180deg)translateZ(200px);}目的 {不透明度:0.9；}对象:悬停{不透明度:1；}
HTML:
<div class="viewport"><section class="cube" style="transition: 500ms; -webkit-transition: 500ms;"><div>MELABA!</div><div><h2>3D立方体</h2><time>2010 年 9 月 28 日</time><p>作者:Paul Hayes</p><p>使用 css、webkit-perspective 和 webkit-transform 构建的 3D 立方体.通过 webkit-transition 进行轮换.</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><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"高度=360"></对象>
<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><p>我在布莱顿设计和构建网站</p>
<div><small>这里什么都没有.</small>
</节>
<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>
我创建了没有 -webkit- 前缀的每个属性的副本.我做错了什么吗?接下来我该怎么办?
解决方案
首先，一般来说，拖动和交互通常是指 JavaScript.是的，有一些 CSS 技巧，我自己也使用过并滥用它们，但在这种情况下，不使用 JS 绝对是疯了.
所以这意味着您需要通过 JavaScript 将所有来自祖先的变换(这意味着立方体本身的旋转以及您通常在立方体的父级上设置的透视)链接到立方体的表面.
您可以通过几种方式做到这一点.在本例中，我使用了 face 元素的 style 属性，但您也可以将样式插入到 style 元素中.
无论如何...
相关HTML:
<div class='face'></div><!-- 还有五张脸-->
相关CSS:
由于我将通过 JS 更改变换值，因此我没有费心在 CSS 中设置它们.
.cube, .cube * {位置:绝对；顶部:50%；左:50%；}.脸 {边距:-8em；宽度:16em；高度:16em；}
JS:
下面的代码又快又脏，可以改进.
var faces = document.querySelectorAll('.face'),n = 面长，样式 = [],_style = getComputedStyle(faces[0]),因子 = 3,side = parseInt(_style.width.split('px')[0], 10),max_amount = 因子*边，单位 = 360/max_amount,标志 = 假，tmp, p = '透视(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)';面孔[i].style.transform = p + tmp;faces[i].style['-webkit-transform'] = p + tmp;样式.推(tmp)；}var 拖动 = 函数(e){var p1 = { 'x': e.clientX - p0.x, 'y': e.clientY - p0.y },角度 = {'x': -p1.y*unit, 'y': p1.x*unit};for(var i = 0; i < n; i++) {tmp = 'rotateX(' + angle.x + 'deg)' +'rotateY(' + angle.y + 'deg)' + 样式[i];面孔[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 };标志 = 真；window.addEventListener('mousemove', drag, false);}别的 {标志 = 假；}}， 错误的);window.addEventListener('mouseup', function(e) {如果(标志){for(var i = 0; i < n; i++) {_style = faces[i].style;tmp = _style.transform ||_style['-webkit-transform'];样式[i] = tmp.replace('透视(32em)','');}}标志 = 假；window.removeEventListener('mousemove',drag,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&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?
解决方案
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);
这篇关于CSS3 - 3D Cube- IE 变换样式:保留 3d 解决方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
