正方形的复选框html,正方体.html

Document

*{

margin: 0;

padding: 0;

}

div{

background-size: cover;

}

.box{

width: 200px;

height: 200px;

margin: 300px auto;

position: relative;

transform-style: preserve-3d;

/* perspective: 500px; */

animation: over 10s linear infinite alternate ;

}

@keyframes over{

form{

transform: none;

}

to{

transform: rotateX(360deg) rotateY(720deg) translate(40px, -320px);

}

}

.box1{

width: 100%;

height: 100%;

background:url("share1.png") no-repeat;

background-color: blue;

position: absolute;

transform: translateZ(100px);

}

.box2{

width: 100%;

height: 100%;

background:url("share2.png") no-repeat;

background-color: red;

position: absolute;

transform: translateY(100px) rotateX(-90deg);

}

.box3{

width: 100%;

height: 100%;

position: absolute;

background:url("share3.png") no-repeat;

background-color: blueviolet;

transform: translateY(-100px) rotateX(90deg);

}

.box4{

width: 100%;

height: 100%;

position: absolute;

background:url("share4.png") no-repeat;

background-color: black;

transform:translateZ(-100px);

}

.box5{

width: 100%;

height: 100%;

position: absolute;

background:url("share5.png") no-repeat;

background-color: green;

transform:translateX(-100px) rotateY(90deg);

}

.box6{

width: 100%;

height: 100%;

position: absolute;

background:url("share6.png") no-repeat;

background-color: darkorange;

transform:translateX(100px) rotateY(-90deg);

}

/* .box:hover{

transform: rotateX(360deg) rotateY(720deg);

} */

var zan = document.getElementById('zan');

var kai = document.getElementById('kai');

var box7= document.getElementById('box7');

zan.onclick = function (){

console.log(zan);

box7.style.animationPlayState = 'paused';

}

kai.onclick = function(){

box7.style.animationPlayState = 'running';

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史