jquery - How to get 3d cube style for my div -


i want 3d style div. don't have idea how it.

.cube{    width:100px;    height:100px;    background:#ff7700;    color:#fff;    text-align:center;    line-height:95px;  }
<div class="cube">3d cube</div>

https://davidwalsh.name/css-cube check out may you

body {       margin-top: 125px;   }    @-moz-keyframes spinningh {    {      -moz-transform: rotatex(0deg) rotatey(0deg);    }    to{      -moz-transform: rotatex(360deg) rotatey(360deg);    }  }    @-webkit-keyframes spinningh {    {      -webkit-transform: rotatex(0deg) rotatey(0deg);    }    to{      -webkit-transform: rotatex(360deg) rotatey(360deg);    }  }    @-o-keyframes spinningh {    {      -o-transform: rotatex(0deg) rotatey(0deg);    }    to{      -o-transform: rotatex(360deg) rotatey(360deg);    }  }    @-ms-keyframes spinningh {    {      -ms-transform: rotatex(0deg) rotatey(0deg);    }    to{      -ms-transform: rotatex(360deg) rotatey(360deg);    }  }    @keyframes spinningh {    {      transform: rotatex(0deg) rotatey(0deg);    }    to{      transform: rotatex(360deg) rotatey(360deg);    }  }     #container {    -webkit-perspective : 1000px;    -moz-perspective    : 1000px;    -o-perspective      : 1000px;    -ms-perspective     : 1000px;    perspective         : 1000px;      -webkit-perspective-origin  : 50% 50%;    -moz-perspective-origin     : 50% 50%;    -moz-transform-origin       : 50% 50%;    -o-perspective-origin       : 50% 50%;    -ms-perspective-origin      : 50% 50%;    perspective-origin          : 50% 50%;   }    .animate {    -webkit-animation : spinningh 6s infinite linear;    -moz-animation    : spinningh 6s infinite linear;    -o-animation      : spinningh 6s infinite linear;    -ms-animation     : spinningh 6s infinite linear;    animation         : spinningh 6s infinite linear;  }    #cube {    position: relative;    margin: 0 auto;    height: 400px;    width: 400px;      -webkit-transition  : -webkit-transform 2s linear;    -moz-transition     : -moz-transform 2s linear;    -o-transition       : -o-transform 2s linear;    -ms-transition      : -ms-transform 2s linear;    transition          : transform 2s linear;      -webkit-transform-style : preserve-3d;    -moz-transform-style    : preserve-3d;    -o-transform-style      : preserve-3d;    -ms-transform-style     : preserve-3d;    transform-style         : preserve-3d;  }    #cube>div {    position: absolute;    height: 360px;    width: 360px;    padding: 20px;    opacity: 0.9;    background-position:center center;  }    #cube div:nth-child(1) {    -webkit-transform : translatez(200px);    -moz-transform    : translatez(200px);    -o-transform      : translatez(200px);    -ms-transform     : translatez(200px);    transform         : translatez(200px);    background-color  : #2e272f;        background-repeat : no-repeat;  }    #cube div:nth-child(2) {    -webkit-transform : rotatey(90deg) translatez(200px);    -moz-transform    : rotatey(90deg) translatez(200px);    -o-transform      : rotatey(90deg) translatez(200px);    -ms-transform     : rotatey(90deg) translatez(200px);    transform         : rotatey(90deg) translatez(200px);    background-color  : #2d3a4d;       background-repeat : no-repeat;  }    #cube div:nth-child(3) {    -webkit-transform : rotatey(180deg) translatez(200px);    -moz-transform    : rotatey(180deg) translatez(200px);    -o-transform      : rotatey(180deg) translatez(200px);    -ms-transform     : rotatey(180deg) translatez(200px);    transform         : rotatey(180deg) translatez(200px);    background-color  : #2d1c12;       background-repeat : no-repeat;  }    #cube div:nth-child(4) {    -webkit-transform : rotatey(-90deg) translatez(200px);    -moz-transform    : rotatey(-90deg) translatez(200px);    -o-transform      : rotatey(-90deg) translatez(200px);    -ms-transform     : rotatey(-90deg) translatez(200px);    transform         : rotatey(-90deg) translatez(200px);    background-color  : #693c1f;       background-repeat : no-repeat;  }    #cube div:nth-child(5) {    -webkit-transform : rotatex(-90deg) translatez(200px) rotate(180deg);    -moz-transform    : rotatex(-90deg) translatez(200px) rotate(180deg);    -o-transform      : rotatex(-90deg) translatez(200px) rotate(180deg);    -ms-transform     : rotatex(-90deg) translatez(200px) rotate(180deg);    transform         : rotatex(-90deg) translatez(200px) rotate(180deg);    background-color  : #955122;       background-repeat :no-repeat;  }    #cube div:nth-child(6)  {    -webkit-transform : rotatex(90deg) translatez(200px);    -moz-transform    : rotatex(90deg) translatez(200px);    -o-transform      : rotatex(90deg) translatez(200px);    -ms-transform     : rotatex(90deg) translatez(200px);    transform         : rotatex(90deg) translatez(200px);    background-color  : #e34c26;        background-repeat :no-repeat;    text-align:center;    }
<div id="container">    <div id="cube" class="animate">      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>    </div>  </div>


-

Comments

Post a Comment

Popular posts from this blog

serialization - Convert Any type in scala to Array[Byte] and back -

i have following question: i have variable value in program declared value. i want convert value byte array.. how can serialize byte array , back? found examples related other types such double or int, not any. this should need. it's pretty similar how 1 in java. import java.io.{bytearrayinputstream, bytearrayoutputstream, objectinputstream, objectoutputstream} object serialization extends app { def serialise(value: any): array[byte] = { val stream: bytearrayoutputstream = new bytearrayoutputstream() val oos = new objectoutputstream(stream) oos.writeobject(value) oos.close stream.tobytearray } def deserialise(bytes: array[byte]): = { val ois = new objectinputstream(new bytearrayinputstream(bytes)) val value = ois.readobject ois.close value } println(deserialise(serialise("my test"))) println(deserialise(serialise(list(1)))) println(deserialise(serialise(map(1 -> 2)))) println(deserialise(seri
Read more

matplotlib support failed in PyCharm on OSX -

any idea how fix ? how can debug might problem ? not seem : https://youtrack.jetbrains.com/issue/py-15520 i in console: python 2.6.9 (unknown, jul 14 2015, 19:46:31) [gcc 4.2.1 compatible apple llvm 6.0 (clang-600.0.39)] on darwin >>> import matplotlib.pyplot plt matplotlib support failed the backend : >>> import matplotlib >>> print(matplotlib.rcparams['backend']) macosx
Read more

python - Matplotlib: TypeError: 'AxesSubplot' object is not callable -

i new programming please pardon me if rookie mistake. i writing python script have defined functions create subplots of distributions. i have slider widget end user change value of variables(mu , sigma) , see effect on distribution. here's code import numpy np print np.__version__ import scipy print scipy.__version__ scipy.stats import norm, lognorm, uniform import matplotlib print matplotlib.__version__ import matplotlib.pyplot plt matplotlib.widgets import slider, button, radiobuttons, checkbuttons #####calculating mean , standard deviation##### global mu_a1 mu_a1 = 1 global mu_b1 mu_b1 = 10 global mu_c1 mu_c1 = -13 global sigma_a1 sigma_a1 = 0.14 global sigma_b1 sigma_b1 = 1.16 global sigma_c1 sigma_c1 = 2.87 mu_x01 = -11 sigma_x01 = 1.9 #####_____##### #####generating random data##### a1 = 0.75*mu_a1 + (1.25 - 0.75)*sigma_a1*np.random.sample(10000) b1 = 8*mu_b1 + (12 - 8)*sigma_b1*np.random.sample(10000) c1 = -12*mu_c1 + 2*sigma_c1*np.random.sample(10000)
Read more