3d立方体的圆角

时间：2013-10-04 16:31:12

标签： jquery css css3

我创建了一个3D立方体。我希望立方体的边缘光滑和弯曲 - 不锋利。

HTML 

<div class="wrap">
<div class="cube">
    <div class="front">front</div>
    <div class="back">back</div>
    <div class="top">top</div>
    <div class="bottom">bottom</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
</div>

CSS 

.wrap {
    perspective: 800px;
    perspective-origin: 50% 100px;
}

.cube {
    position: relative;
    width: 200px;
    transform-style: preserve-3d;
}

.cube div {
    position: absolute;
    width: 200px;
    height: 200px;
    background: #aaa;
}

.back {
    transform: translateZ(-100px) rotateY(180deg);
}

.right {
    transform: rotateY(-270deg) translateX(100px);
    transform-origin: top right;
}

.left {
    transform: rotateY(270deg) translateX(-100px);
    transform-origin: center left;
}

.top {
    transform: rotateX(-90deg) translateY(-100px);
    transform-origin: top center;
}

.bottom {
    transform: rotateX(90deg) translateY(100px);
    transform-origin: bottom center;
}

.front {
    transform: translateZ(100px);
}

@keyframes spin {
    from {
        transform: rotateY(0);
    }

    to {
        transform: rotateY(360deg);
    };
}

为动画制作动画     .cube {         动画：旋转5s无限线性;     }

请帮我解决这个问题。

3 个答案:

答案 0 :(得分：4)

没有'简单'的方法来做到这一点。您必须为每个“连接”制作5个“边”，并将它们放置在围绕这些角的适当角度。然后角落将变得相当复杂。enter image description here

考虑到这个线框的每个“facet”都需要是它自己的dom元素。

答案 1 :(得分：2)

好的，有点更新的小提琴：http://jsfiddle.net/54juW/2/

我认为添加边框半径并不是你想要的吗？

border-radius: 40px;
然而，我认为很难实现光滑的角落。 也许你可以在角落里添加更多的侧面，而不是一次性翻转90度，但有几个较小的侧面＆＃34;你每次都翻转很少。

另一篇做一些骰子效果的文章（如果你问我不是很好，但也许是朝着正确的方向看）

http://cssnerd.com/2012/02/26/css-3d-cube-dice/

答案 2 :(得分：0)

这是我发现的最好的，纯CSS滚动骰子（一个圆形的立方体）：

https://codepen.io/tameraydin/pen/CADvB

将其复制到此处，以防Codepen发生问题：

// MIT licensed, © 2015 Tamer Aydn https://codepen.io/tameraydin
body {
  font-size:.9em;
  font-family:sans-serif;
}
@keyframes spin {
    0% { transform: translateZ(-100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    16% { transform: translateZ(-100px) rotateX(180deg) rotateY(180deg) rotateZ(0deg); }
    33% { transform: translateZ(-100px) rotateX(360deg) rotateY(90deg) rotateZ(180deg); }
    50% { transform: translateZ(-100px) rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
    66% { transform: translateZ(-100px) rotateX(180deg) rotateY(360deg) rotateZ(270deg); }
    83% { transform: translateZ(-100px) rotateX(270deg) rotateY(180deg) rotateZ(180deg); }
    100% { transform: translateZ(-100px) rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}
@keyframes spin-duplicate {
    0% { transform: translateZ(-100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    16% { transform: translateZ(-100px) rotateX(180deg) rotateY(180deg) rotateZ(0deg); }
    33% { transform: translateZ(-100px) rotateX(360deg) rotateY(90deg) rotateZ(180deg); }
    50% { transform: translateZ(-100px) rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
    66% { transform: translateZ(-100px) rotateX(180deg) rotateY(360deg) rotateZ(270deg); }
    83% { transform: translateZ(-100px) rotateX(270deg) rotateY(180deg) rotateZ(180deg); }
    100% { transform: translateZ(-100px) rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}
@keyframes roll {
    0% { transform: translate3d(-200px,-50px,-400px) }
    12% { transform: translate3d(0px,0,-100px) }
    25% { transform: translate3d(200px,-50px,-400px) }
    37% { transform: translate3d(0px,-100px,-800px) }
    50% { transform: translate3d(-200px,-50px,-400px) }
    62% { transform: translate3d(0px,0,-100px) }
    75% { transform: translate3d(200px,-50px,-400px) }
    87% { transform: translate3d(0px,-100px,-800px) }
    100% { transform: translate3d(-200px,-50px,-400px) }
}
#roll:checked ~ #platform > #dice {
    animation: spin-duplicate 2s infinite linear;
}
#roll:checked ~ #platform {
    width:200px;
    height:200px;
    transform-style: preserve-3d;
    animation: roll 1.6s infinite linear;
}
#secondroll:checked ~ #roll:checked ~ #platform > #dice,
#secondroll:checked ~ #roll:checked ~ #platform {
    animation-play-state: paused;
}
#wrapper {
    position: relative;
    width: 200px;
    padding-top: 100px;
    margin: 0 auto;
    perspective: 1200px;
}
#platform {
  margin-top:100px;
}
#dice span {
    position:absolute;
    margin:100px 0 0 100px;
    display: block;
    font-size: 2.5em;
    padding: 10px;
}
#dice {
    position: absolute;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    animation: spin 50s infinite linear;
}
.side {
    position: absolute;
    width: 200px;
    height: 200px;
    background: #fff;
    box-shadow:inset 0 0 40px #ccc;
    border-radius: 40px;
}
#dice .cover, #dice .inner {
    background: #e0e0e0;
    box-shadow: none;
}
#dice .cover {
    border-radius: 0;
    transform: translateZ(0px);
}
#dice .cover.x {
    transform: rotateY(90deg);
}
#dice .cover.z {
    transform: rotateX(90deg);
}
#dice .front  {
    transform: translateZ(100px);
}
#dice .front.inner  {
    transform: translateZ(98px);
}
#dice .back {
    transform: rotateX(-180deg) translateZ(100px);
}
#dice .back.inner {
    transform: rotateX(-180deg) translateZ(98px);
}
#dice .right {
    transform: rotateY(90deg) translateZ(100px);
}
#dice .right.inner {
    transform: rotateY(90deg) translateZ(98px);
}
#dice .left {
    transform: rotateY(-90deg) translateZ(100px);
}
#dice .left.inner {
    transform: rotateY(-90deg) translateZ(98px);
}
#dice .top {
    transform: rotateX(90deg) translateZ(100px);
}
#dice .top.inner {
    transform: rotateX(90deg) translateZ(98px);
}
#dice .bottom {
    transform: rotateX(-90deg) translateZ(100px);
}
#dice .bottom.inner {
    transform: rotateX(-90deg) translateZ(98px);
}
.dot {
    position:absolute;
    width:46px;
    height:46px;
    border-radius:23px;
    background:#444;
    box-shadow:inset 5px 0 10px #000;
}
.dot.center {
    margin:77px 0 0 77px;
}
.dot.dtop {
    margin-top:20px;
}
.dot.dleft {
    margin-left:134px;
}
.dot.dright {
    margin-left:20px;
}
.dot.dbottom {
    margin-top:134px;
}
.dot.center.dleft {
    margin:77px 0 0 20px;
}
.dot.center.dright {
    margin:77px 0 0 134px;
}

#background {
	position:fixed;
	z-index:-1;
	width:100%;
	height:100%;
	background: #071a1e;
	background: -moz-linear-gradient(top, #071a1e 0%, #274249 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#071a1e), color-stop(100%,#274249));
	background: -webkit-linear-gradient(top, #071a1e 0%,#274249 100%);
	background: linear-gradient(to bottom, #071a1e 0%,#274249 100%);
}
label, input[type=checkbox]:before {
	position: absolute;
	overflow:hidden;
	top:40px;
	left:40px;
	display:block;
	width:120px;
	padding-top:9px;
	height:31px;
	cursor:pointer;
	text-align:center;
	font-size:1.2em;
	font-weight:bold;
	color:#fff;
	border-radius:6px;
	border:1px solid;
}
input[type=checkbox]:before {
	background:transparent;
	border-color:transparent;
}
input[type=checkbox] {
	display:none;
}
label {
	opacity:.5;
	transition:all .3s ease;
}
label:hover {
	opacity:1;
	box-shadow:0 0 18px rgba(255,255,255,.5);
}
label[for=roll] {
	z-index:1;
	text-shadow:0 -1px 0 #006699;
	border-color:#17C7EC;
	background: -moz-linear-gradient(top, #0099CC 0%, #006699 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0099CC), color-stop(100%,#006699));
	background: -webkit-linear-gradient(top, #0099CC 0%,#006699 100%);
	background: linear-gradient(to bottom, #0099CC 0%,#006699 100%);
}
label[for=secondroll] {
	margin-top:-100px;
	text-shadow:0 -1px 0 #CC0033;
	border-color:#FF8298;
	background: -moz-linear-gradient(top, #FF6666 0%, #CC0033 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6666), color-stop(100%,#CC0033));
	background: -webkit-linear-gradient(top, #FF6666 0%,#CC0033 100%);
	background: linear-gradient(to bottom, #FF6666 0%,#CC0033 100%);
}
#roll:checked ~ label[for=roll] {
	margin-top:-100px;
}
#roll:checked ~ label[for=secondroll] {
	margin-top:0px;
}
#secondroll:checked ~ label[for=secondroll] {
	text-shadow:0 -1px 0 #336633;
	border-color:#66FF99;
	background: -moz-linear-gradient(top, #66CC66 0%, #336633 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#66CC66), color-stop(100%,#336633));
	background: -webkit-linear-gradient(top, #66CC66 0%,#336633 100%);
	background: linear-gradient(to bottom, #66CC66 0%,#336633 100%);
}
#secondroll:checked ~ label[for=secondroll] span {
	display:none;
}
#secondroll:checked ~ label[for=secondroll]:after {
	content:"Keep rollin'!";
}
<div id="background"></div>
<div id="wrapper">
  <input id="secondroll" name="roll" type="checkbox">
  <input id="roll" name="roll" type="checkbox">
  <label for="roll">Roll it!</label>
  <label for="secondroll"><span>Stop!</span></label>
  <div id="platform">
    <div id="dice">
      <div class="side front">
        <div class="dot center"></div>
      </div>
      <div class="side front inner"></div>
      <div class="side top">
        <div class="dot dtop dleft"></div>
        <div class="dot dbottom dright"></div>
      </div>
      <div class="side top inner"></div>
      <div class="side right">
        <div class="dot dtop dleft"></div>
        <div class="dot center"></div>
        <div class="dot dbottom dright"></div>
      </div>
      <div class="side right inner"></div>
      <div class="side left">
        <div class="dot dtop dleft"></div>
        <div class="dot dtop dright"></div>
        <div class="dot dbottom dleft"></div>
        <div class="dot dbottom dright"></div>
      </div>
      <div class="side left inner"></div>
      <div class="side bottom">
        <div class="dot center"></div>
        <div class="dot dtop dleft"></div>
        <div class="dot dtop dright"></div>
        <div class="dot dbottom dleft"></div>
        <div class="dot dbottom dright"></div>
      </div>
      <div class="side bottom inner"></div>
      <div class="side back">
        <div class="dot dtop dleft"></div>
        <div class="dot dtop dright"></div>
        <div class="dot dbottom dleft"></div>
        <div class="dot dbottom dright"></div>
        <div class="dot center dleft"></div>
        <div class="dot center dright"></div>
      </div>
      <div class="side back inner"></div>
      <div class="side cover x"></div>
      <div class="side cover y"></div>
      <div class="side cover z"></div>
    </div>
  </div>
</div>

相关问题
最新问题