Realize simple three-D cube automatic rotation

demonstration

Technology stack

display:inline-block,block,inline The difference between elements :

display：block Display elements as block level elements , Thus, the width and height of elements can be better controlled , And the inside and outside margins , Each block level element starts with a new line .

display :
inline Display elements as inline elements , Height , Row height and bottom margin cannot be changed , Height is the width of the content text or picture , Can't change . Multiple adjacent inline elements are arranged in the same row , Know that the page can not be arranged in a row , Will change a new line .

display：inline-block Looks like the value name inline-block It's a mixture , Actually it is , Show elements as inline block elements , After setting this property , Other inline block level elements are arranged on the same row . For example, we li Element one inline-block, Make it both block Width height characteristic of , And then there is inline The peer characteristics of , When there are elements with different contents in the same line , Usually you need to set the alignment, such as vertical-align:top; Align the top of the element .

In line labels ： Can't set width Height padding margin, The label cannot be automatically extended . Can pass display Flexible conversion of labels within and between lines ;display：inline; Convert to inline labels display：block; Convert to block level labels .

opacity Property to set or return the opacity of the element .

The opacity level of the element describes the transparency level , When opacity is 1 When, it means completely opaque , When opacity is 0.5 Indicates translucency when , When opacity is 0 Is completely transparent .

Source code

css

* {
    
    margin: 0;
    padding: 0;
}
html, body {
    
    width: 100%;
    height: 100%;
    overflow: hidden;
}
canvas {
    
    display: block;
    position: absolute;
    z-index: -2;
}

.snowback{
    
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: absolute;
    z-index: 1;
}
.ziti{
    
    height: 50px;
    width: 100%;
    font-size: 60px;
    text-align: center;
    position: absolute;
    margin-top: 100px;
    z-index: 11;
}
.ziti span {
    
    height: 30px;
    width: 100%;
    font-size: 25px;
    font-family: "å¾è½¯é›…黑";
    text-align: center;
    line-height: 30px;
     /*å…³é”ä»£ç */
    background-image: -webkit-linear-gradient(left, rgb(20, 26, 150), #E6D205 25%, rgb(196, 30, 30) 50%, rgb(41, 197, 111) 75%, rgb(175, 23, 221));
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
    animation: masked-animation 4s infinite linear;
}

/*å…³é”ä»£ç */
@keyframes masked-animation {
    
    0% {
    
        background-position: 0 0;
    }
    100% {
    
        background-position: -100% 0;
    }
}
.main{
    
    width: 200px;
    height: 200px;
    top:calc(calc(50% - 100px));
    margin-left: calc(50% - 100px);
    position: absolute;
}
.box {
    
    width: 200px;
    height: 200px;
    opacity: 1;
    position: absolute;
    transform: scale(0.8);
}
.box-biger:hover+.box{
    
    transform: scale(0.8);
}
.box-biger{
    
    width: 200px;
    height: 200px;
    opacity: 0;
    transition: all 1s;
    position: absolute;
    z-index: 10;
}
.box-biger:hover{
    
    width: 600px;
    height: 600px;
    opacity: 1;
    margin-top: calc(50% - 300px);
    margin-left: calc(50% - 300px);
}
.box ul {
    
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    background-color: transparent;
    list-style: none;
    position: absolute;
    transition: all 1s;
    transform-origin: 50% 50% 0;
}
.box-biger ul{
    
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    background-color: transparent;
    list-style: none;
    position: absolute;
    transition: all 1s;
}
.small {
    
    font-size: 60px;
    text-align: center;
    display: inline-block;
    width: 100%;
    height: 100%;
    position: absolute;
    box-sizing: border-box;
}
.biger {
    
    font-size: 60px;
    text-align: center;
    display: inline-block;
    width: 100%;
    height: 100%;
    position: absolute;
    box-sizing: border-box;
}
.small img{
    
    height: 100%;
    width: 100%;
    opacity: 1;
}
.biger img{
    
    height: 70%;
    width: 70%;
    margin-top: 15%;
    margin-left: 15%;
    opacity: 0.3;
}
.idv1 {
    
    background-size: cover;
    left: 0;
    top: 100%;
    transform: translateZ(-100px)  rotateY(180deg)  rotate(180deg);
    transform-origin: top;
}

.idv2 {
    
    background-size: cover;
    top: 0;
    margin-left: 50%;
    transform: rotateY(90deg);
}

.idv3 {
    
    background-size: cover;
    left: 0;
    top: 0;
    margin-left: -50%;
    transform: rotateY(90deg);
}

.idv4 {
    
    transform: rotateX(90deg);
    top: -50%;
}

.idv5 {
    
    transform: rotateX(270deg);
    top: 50%;
}

.idv6 {
    
    background-size: cover;
    left: 0;
    top: 0;
    transform: translateZ(100px);
}

.idv7 {
    
    background-size: cover;
    left: 0;
    top: 100%;
    transform: translateZ(-100px)  rotateY(180deg)  rotate(180deg);
    transform-origin: top;
    transition: all 1s;
}

.idv12 {
    
    background-size: cover;
    left: 0;
    top: 0;
    transform: translateZ(100px);
    transition: all 1s;
}

.box-biger:hover>ul>.idv7{
    
    transform: translateZ(-300px)  rotateY(180deg)  rotate(180deg);
}
.box-biger:hover>ul>.idv12{
    
    transform: translateZ(300px);
}

.btn {
    
    height: 60px;
    text-align: center;
    line-height: 60px;
    width: 90px;
    margin-left: 20px;
    float: left;
    box-sizing: border-box;
    position: absolute;
    border-radius: 30px;
    z-index: 30;
}
.btn img{
    
    height: 100%;
    width: 100%;
}
.btn:hover {
    
    cursor: pointer;
}
.inpbtn {
    
    height: 40px;
    float: right;
    line-height: 40px;
    margin-left: 200px;
    background-color: pink;
    color: white;
    border-radius: 30px;
}


input {
    
    height: 40px;
    width: 180px;
    float: left;
    border-radius: 20px;
    font-size: 15px;
}

audio {
    
    height: 40px;
    width: 350px;
    margin-left: -40px;
    margin-top: -1px;
}

.audiobox {
    
    height: 40px;
    width: 300px;
    border-radius: 20px;
    overflow: hidden;
}
.btnonlond:hover>.hiddenbox{
    
    visibility: inherit;
}
.hiddenbox {
    
    margin-top: -60px;
    margin-left: 100px;
    height: 80px;
    width: 300px;
    transition: all 2s;
    visibility: hidden;
    position: absolute;
    z-index: 30;
}

js

// Customize these...
var n = 300,
    speed = 5,// Speed definition 
    startSize = rand(100,300);// Size definition 

// ...not these
var c = document.getElementById("c"),
    ctx = c.getContext("2d"),
    cw = (c.width = window.innerWidth),
    ch = (c.height = window.innerHeight),
    mousePos = {
    x:"", y:""},
    img = new Image(),
    particles = [],
    particleNumber = 0,
    Particle = function(index) {
    
      this.index = index;
      this.dur = (100-rand(9, 90))/speed;
      this.draw = function() {
    
        ctx.translate( this.x, this.y );
        ctx.globalAlpha = this.alpha;
        ctx.globalCompositeOperation = 'lighter';
        // if (index%1.5==0) ctx.globalCompositeOperation = 'overlay';
        if (index%2==0) ctx.globalCompositeOperation = 'xor';
        ctx.drawImage(img, -this.size/2, -this.size/2, this.size, this.size);
        ctx.translate( -this.x, -this.y );
      }
    };

function setParticle(p, firstRun) {
    
  var _x = cw*rand(0,1), _y = ch*rand(0,1), _s = startSize;
  if (rand(0,1)>0.3 && mousePos.x!=""){
     //console.log(mousePos)
    _x = mousePos.x;
    _y = mousePos.y;
    _s = _s/10;
  }
  var _tl = new TimelineMax()
            .fromTo(p, p.dur, {
    
                x:_x,
                y:_y,
                size:_s,
                alpha:0
            },{
    
                size:'+='+String(rand(200,400)),
                bezier:[{
    alpha:rand(0.15,0.65)},{
    alpha:0}],
                ease:Power1.easeOut,//ease:Power0.easeNone,
                onComplete:function(){
     setParticle(p); }
            });

  if (firstRun) _tl.seek(p.dur*rand()); //fast-forward on first run
}


TweenMax.ticker.addEventListener("tick", function(){
    
  ctx.clearRect(0, 0, cw, ch);
  for (var i=0; i<n; i++) particles[i].draw();
});


window.addEventListener('resize', doResize)
function doResize() {
    
  particleNumber = 0;  
  cw = (c.width = window.innerWidth);
  ch = (c.height = window.innerHeight);
  for (var i=0; i<n; i++) {
    
    TweenMax.killTweensOf(particles[i]);
    setParticle(particles[i], true);
  }
  TweenMax.fromTo(c, 0.3, {
    alpha:0},{
    alpha:1, ease:Power3.easeInOut});
}

// First run
for (var i=0; i<n; i++) particles.push(new Particle(i));
doResize();


function rand(min, max) {
    
  (min) ? min=min : min=0;
  (max) ? max=max : max=1;
  return min + (max-min)*Math.random();
}

Click to get the information directly

If you are learning python perhaps Java Even if it is C If you have any problems, you can leave me a message , Because in the early stage of learning, novices always take many detours , At this time, if there is no one to help, it is easy to give up . There are many such examples around. Many people change their majors and directions as they learn , Not only their own problems, but also the lack of correct learning . So as a passer-by, I hope to leave a message to me if you have any questions , It's not help, it's just a matter of typing a few lines easily .

Here you are python,Java Learning materials and interesting programming projects , More difficult to find resources . Anyway, it's not a loss to see .