ورود

View Full Version : مشکل در ساخت مکعب سه بعدی با CSS


aminhashemy
چهارشنبه 28 مرداد 1394, 14:55 عصر
خسته نباشید دوستان
من میخوام یه مکعب سه بعدی با CSS بسازم ولی بیشتر شبیه این مانیتور های CRT میشه تا مکعب
این لینک رو ببینید : http://s.7learn.com/uploads/2014/09/cube2.html

میخوام این شکلی بشه ولی نمیشه نمیفهمم هم چرا
اگه امکانش هست بگید مشکلش توی چیه؟
این کدهای من


<html>
<head>
<link type="text/css" href="cube.css" rel="stylesheet" />
</head>
<body>
<div class="cube-container">
<div id="cube" class="cube">
<div class="front">front</div>
<div class="back">back</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
</div>
</div>
</body>
</html>


اینا هم CSS هاش:


.cube{
perspective: 800px;
width: 200px;
height: 200px;
margin: 50px auto;
position: relative;
transform-style: preserve-3d;
perspective-origin:50% 50%;
animation:rotate 3s linear infinite;
}
@keyframes rotate {
from{transform:rotateY(0deg);}
to{transform:rotateY(360deg);}
}
.cube > div{
border:1px solid black;
position: absolute;
text-align: center;
line-height: 200px;
width: 200px;
height: 200px;
}
.cube .front {transform: translateZ(100px);color: white;background: rgba(250,10,55,.5);}
.cube .back {transform: rotateY(180deg) translateZ(100px);color: green;background: rgba(100,20,210,.5);}
.cube .left {transform:rotateY(-90deg) translateZ(100px);color: green;background: rgba(90,20,250,.5);}
.cube .right {transform: rotateY(90deg) translateZ(100px);color: red;background: rgba(90,200,10,.5);}
.cube .top {transform:rotatex(90deg) translateZ(100px);color: white;background: rgba(0,0,0,.5);}
.cube .bottom {transform:rotatex(-90deg) translateZ(100px);color: green;background: rgba(255,255,0,.5);}
sinoser
چهارشنبه 28 مرداد 1394, 17:29 عصر
به جای اینا

.cube{
perspective: 800px;
width: 200px;
height: 200px;
margin: 50px auto;
position: relative;
transform-style: preserve-3d;
perspective-origin:50% 50%;
animation:rotate 3s linear infinite;
}
@keyframes rotate {
from{transform:rotateY(0deg);}
to{transform:rotateY(360deg);}
}



اینا رو بزار

.cube-container{
-webkit-perspective: 800px;
perspective: 800px;
-webkit-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
margin: 50px auto;
}
.cube{
width: 200px;
height: 200px;
margin: 0px auto;
position: relative;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
animation:rotate 3s linear infinite;
}
@keyframes rotate {
from {transform: rotateX(0deg) rotateY(0deg);}
to{transform: rotateX(360deg) rotateY(360deg);}
}
@-webkit-keyframes rotate {
from {-webkit-transform: rotateX(0deg) rotateY(0deg);}
to{-webkit-transform: rotateX(360deg) rotateY(360deg);}
}
aminhashemy
چهارشنبه 28 مرداد 1394, 22:18 عصر
خیلی ممنون
بله تو سایت اصلی هم هست
ولی میخوام ببینم ایرادم کجاست
اخه من دارم سه بعدی رو یاد مگیرم
برای همین میخوام
aminhashemy
چهارشنبه 28 مرداد 1394, 22:48 عصر
آقا حل شد
چون container نذاشته بودم بود
ممنون از شما که لطف کردید ج دادید
siros1983
چهارشنبه 28 مرداد 1394, 23:27 عصر
آقا حل شد
چون container نذاشته بودم بود
ممنون از شما که لطف کردید ج دادید

میشه اگه جای خوبی برای سه بعدی آموزش دارید به منم بدید ممنون
sinoser
پنج شنبه 29 مرداد 1394, 10:57 صبح
میشه اگه جای خوبی برای سه بعدی آموزش دارید به منم بدید ممنون
من دارم یک ویدیو آموزشی میسازم اگر صبر نداری :لبخند: پیشنهاد می کنم یه سر بزنی به صفحات زیر مثال هاشو ببین.
البته مفاهیمشو باید توضیح داده بشه بتون مثلا matrix یک مفهومی هست که توش ریاضی هست و عین یادگرفتن ریاضی می مونه تا برنامه نویسی ولی خب سادس زیاد پیچیده نیستو منم سعیم اینه به زبان ساده (نه ریاضی) بگم.اینو گفتم تا رفتی این سایت نفهمیدی نگران نشی اولش یکم سخته درکشون.
http://www.w3schools.com/cssref/css3_pr_perspective.asp
http://www.w3schools.com/css/css3_3dtransforms.asp
http://www.w3schools.com/css/css3_2dtransforms.asp