- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
请检查该示例:https://jsfiddle.net/ndp0w3L1/2/embedded/result/
如果您将 section.diceswrap
在 y 轴上旋转 90 度作为示例中的第二个骰子:变换:rotateX(0deg) rotateY(90deg) rotateZ(0deg);
轴其余部分的旋转是相同的,它会碰撞并且只会上下移动。
这是在 FF 和 webkit 中。我是否遗漏了一些东西,因为看起来旋转实际上是作为 2D 实现的,没有真正的 3D,如果您以直 Angular 翻转平面,其余轴会发生碰撞。
HTML:
<div class="dice_container">
<section id="done" class="diceswrap">
<div class="dice">
<section class="dice_plane">
<div class="face one zindx1">
<span></span>
</div>
<div class="face two">
<span></span>
<span></span>
</div>
<div class="face three"> <span></span>
<span></span>
<span></span>
</div>
<div class="face four"> <span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="face five">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="face six">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</section>
</div>
</section>
</div>
CSS:
body, pre {
font: normal normal normal 100 % /20px Arial, Helvetica, sans-serif;
}
.dice_container {
padding: 10 % ;
text - align: center;
background - color: #333;
}
.diceswrap {
width: 178px;
height: 178px;
display: inline-block;
}
.dice {
width: 104px;
height: 104px;
margin: 0 auto;
position: relative;
}
.face {
padding: 12px;
width: 104px;
height: 104px;
display: block;
position: absolute;
box-sizing: border-box;
background-color: # e7e7e7;
border: 1 px solid# ccc;
}
.face span {
width: 24 px;
height: 24 px;
display: block;
position: absolute;
background - color: #333;
box-shadow: inset 0 3px # 111,
inset 0 - 3 px #555;
}
.one span {
top: 50%;
left: 50%;
margin: -12px 0 0 -12px;
}
.two span:nth-of-type(1) {
left: 12px;
}
.two span:nth-of-type(2) {
top: 68px;
left: 68px;
}
.three span:nth-of-type(1) {
left: 12px;
}
.three span:nth-of-type(2) {
top: 50%;
left: 50%;
margin: -12px 0 0 -12px;
}
.three span:nth-of-type(3) {
top: 68px;
left: 68px;
}
.four span:nth-of-type(1) {
left: 12px;
}
.four span:nth-of-type(2) {
left: 68px;
}
.four span:nth-of-type(3) {
top: 68px;
left: 12px;
}
.four span:nth-of-type(4) {
top: 68px;
left: 68px;
}
.five span:nth-of-type(1) {
left: 12px;
}
.five span:nth-of-type(2) {
left: 68px;
}
.five span:nth-of-type(3) {
top: 50%;
left: 50%;
margin: -12px 0 0 -12px;
}
.five span:nth-of-type(4) {
top: 68px;
left: 12px;
}
.five span:nth-of-type(5) {
top: 68px;
left: 68px;
}
.six span:nth-of-type(1) {
left: 12px;
}
.six span:nth-of-type(2) {
left: 68px;
}
.six span:nth-of-type(3) {
top: 50%;
left: 12px;
margin: -12px 0 0 0;
}
.six span:nth-of-type(4) {
top: 50%;
left: 68px;
margin: -12px 0 0 0;
}
.six span:nth-of-type(5) {
top: 68px;
left: 12px;
}
.six span:nth-of-type(6) {
top: 68px;
left: 68px;
}
.dice {
perspective: 1000px;
transform-style: preserve-3d;
transition: transform 0.5s linear;
}
.dice_plane {
position: absolute;
transform-style: preserve-3d;
transition: transform 0.4s linear;
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
width: 100%;
height: 100%;
}
.ftwo .dice_plane {
transform: rotateX(-90deg) rotateY(180deg) rotateZ(0deg) !important;
}
.fthree .dice_plane {
transform: rotateX(0deg) rotateY(-90deg) rotateZ(0deg) !important;
}
.ffour .dice_plane {
transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) !important;
}
.ffive .dice_plane {
transform: rotateX(0deg) rotateY(90deg) rotateZ(90deg) !important;
}
.fsix .dice_plane {
transform: rotateX(0deg) rotateY(180deg) rotateZ(0) !important;
}
.one {
transform: translateZ(52px);
rotateY(90deg);
}
.six {
transform: translateZ(-52px);
}
.three {
transform: translateX(52px) rotateY(90deg);
}
.four {
transform: translateX(-52px) rotateY(-90deg);
}
.five {
transform: translateY(52px) rotateX(90deg);
}
.two {
transform: translateY(-52px) rotateX(-90deg);
}
jsfiddle:http://jsfiddle.net/ndp0w3L1/2/
感谢您的帮助
最佳答案
这是我在研究中发现的:
rotateX
和rotateY
变换属性分别围绕水平轴和垂直轴旋转对象,第三个 rotateZ
提供围绕第三个向量的旋转。rotateX(0deg) rotateY(90deg) rotateZ(0deg)
案例场景中的这个向量与水平 X 轴处于同一平面,因此 X、Y 的两个旋转发生碰撞。
你可以给向量任何方向,这样就有问题了
rotateX(0deg) rotateY(90deg) rotateZ(0deg)
相当于
rotateX(0deg) rotateY(90deg) rotate3d(0,0,1, 0deg)
和 rotate3d(1,0,0, 0deg)
将恢复给定示例中的 3d 旋转。
所以任何轴都可以放在rotate3d
格式
关于html - 两轴旋转在css 3d旋转中发生碰撞,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31965983/
下面的代码旨在在首次打开工作簿时运行。 Sub Auto_Open() Dim LastRow As Integer LastRow = Sheet6.UsedRange.Rows.Count Act
当我尝试操作我的代码时,除了弹出调试错误外,它执行得很好。错误信息在这里。 我的完整代码在这里。 #include using namespace std; class String { publi
The invocation of the constructor on type 'WpfApplication1.MainWindow' that matches the specified bi
我正在使用 BaseAdapter: public class MyAdapter extends BaseAdapter{ private final LayoutInflater mInflate
我想做网页抓取。我写了代码 var connection = require('./mysqlConnection'); var c = new Crawler({ maxConnections
我的系统中发生 Java 堆空间错误。我尝试了很多来自 Stack Overflow 的解决方案,但没有任何效果。当我工作时 当按下 OK 然后 (我的项目没有错误) 我的 eclipse.ini 是
环境: i5 750 DDR3 4GWin7 专业版 x64 sp1 DXSDK 9.0c 2010 年 6 月 GeForce GT240(驱动程序 275.33)512MB MSVC 2008 s
这段代码是我写的。 import socket host = 'localhost' port = 3794 s = socket.socket(socket.AF_INET, socket.SOCK
我正在尝试引用 UTC 时间间隔获取本地日期时间,我正在执行下面的代码。 var dtString =DateTime.UtcNow.ToString(@"yyyy-MM-ddTHH\:mm\:ss
我有一个非常简单的 C# 问题,它从库中加载 Windows WPF 窗口。这是代码: public partial class App : Application { public App(
我目前正在使用带有导航组件的底部导航,它工作正常但是当我们点击导航项 fragment 正在加载然后闪烁正在发生,即使当前选择的项目也会发生闪烁。它在加载 fragment 时发生。我的应用程序屏幕背
我是新来的 kotlin , 当我开始 Null Safety 时,我对下面的情况感到困惑. There's some data inconsistency with regard to initia
我有一个框,其中包含同时发生的两个独立的 css 转换。 当转换发生时,图标下方的标题和段落文本移动位置 参见 JS Fiddle:http://jsfiddle.net/Lsnbpt8r/ 这是我的
在为黑莓 10 构建电话间隙应用程序时,我遇到了异常情况。 [BUILD] Populating application source [BUILD] Parsing config.xml [
这个问题在这里已经有了答案: How to properly stop the Thread in Java? (8 个回答) 3年前关闭。 我看过How to properly stop the T
我试图弄清楚发生 fatal error 时如何刷新页面。基本上我正在访问图像 api 并将图像复制到我的服务器。我还每次都创建照片的缩略图版本。我会每隔一段时间收到一条错误消息,指出我的脚本试图分配
我正在尝试使用断言函数检查元素是否在屏幕上。我在我的测试应用程序 (AndroidDriver) 中使用 Appium 和 Java。我期望的是,如果元素在屏幕上,则返回 1;如果不在屏幕上,则返回
我正在开发图像上传系统。我使用 CommonsMultipartResolver 设置 maxUploadSize。当我尝试上传超过最大尺寸的图像文件时,会发生 MaxUploadSizeExcced
我有以下代码和@ComponentScan(basePackages = "com.project.shopping"),包结构为 com.project.shopping.Controller co
我尝试运行此程序作为测试,但收到错误“发生了 JNI 错误,请检查您的安装并重试”,然后是“发生了 Java 异常”。关于如何解决这个问题有什么想法吗? package java; public cl
我是一名优秀的程序员,十分优秀!