css3 transition 位置,css3 transform transition 动画 图片替换你本地方

效果

标题

body{

cursor: pointer;

}

@keyframes scroll {

from {

background-color: red;

background-position-x: 0%;

}

20% {

background-color: blue;

background-position-x: 1000%;

}

40% {

background-color: pink;

background-position-x: 2000%;

}

60% {

background-color: #e4393c;

background-position-x: 3000%;

}

80% {

background-color: #000000;

background-position-x: 4000%;

}

100% {

background-color: transparent;

background-position-x: 5000%;

}

}

@keyframes rotate {

from {

transform: rotateX(0deg) rotateY(0deg);

}

100% {

transform: rotateX(3000deg) rotateY(3000deg);

}

}

#stage {

width: 400px;

height: 400px;

margin: 100px auto;

/* border:1px solid #333; */

/*perpective*/

-webkit-perspective: 1000px;

}

#container {

width: 400px;

height: 400px;

/* transform:rotatex(-20deg) rotatey(0deg); */

position: relative;

/*规定 子元素 按照3d位置摆放*/

transform-style: preserve-3d;

/* animation: rotate; */

animation-iteration-count: infinite;

animation-duration: 165s;

animation-timing-function: linear;

animation-direction: alternate;

}

#container div {

width: 100%;

height: 100%;

/* background: #e4393c; */

background: rgba(200, 200, 200, 0.6);

background-image: url(./w.png);

position: absolute;

background-size: 55%;

background-position-x: 40%;

/*调用动画*/

animation: scroll;

animation-iteration-count: infinite;

animation-duration: 25s;

animation-timing-function: linear;

animation-direction: alternate;

}

#container div.chiod {

width: 50%;

height: 50%;

background: blue;

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

background-size: 55%;

background-image: url(./w.png);

background-position-x: 40%;

/*调用动画*/

animation-iteration-count: infinite;

animation-duration: 25s;

animation-timing-function: linear;

animation-direction: alternate;

}

#container div:nth-child(1) {

/* background:blue; */

transform: rotateX(0deg) translateZ(200px);

}

#container div:nth-child(2) {

transform: rotateX(-90deg) translateZ(200px);

background-color: blue;

}

#container div:nth-child(3) {

transform: rotateX(-180deg) translateZ(200px);

background-color: green;

}

#container div:nth-child(4) {

transform: rotateX(-270deg) translateZ(200px);

background-color: #000000;

}

#container div:nth-child(5) {

transform: rotateY(90deg) translateZ(200px);

background-color: yellow;

}

#container div:nth-child(6) {

transform: rotateY(90deg) translateZ(-200px);

background-color: violet;

}

#container div:nth-child(7) {

background-color: red;

transform: translate(-50%, -50%) rotateX(0deg) translateZ(100px);

}

#container div:nth-child(8) {

transform: translate(-50%, -50%) rotateX(-90deg) translateZ(100px);

background-color: blue;

}

#container div:nth-child(9) {

transform: translate(-50%, -50%) rotateX(-180deg) translateZ(100px);

background-color: green;

}

#container div:nth-child(10) {

transform: translate(-50%, -50%) rotateX(-270deg) translateZ(100px);

background-color: #000000;

}

#container div:nth-child(11) {

transform: translate(-50%, -50%) rotateY(90deg) translateZ(100px);

background-color: yellow;

}

#container div:nth-child(12) {

transform: translate(-50%, -50%) rotateY(90deg) translateZ(-100px);

background-color: violet;

}

#container.w {

transition: 28s;

transform: rotateX(290deg) rotateY(290deg);

}

buub

var width = window.innerWidth;

var width_2 = width / 2;

var height = window.innerHeight;

var height_2 = height / 2;

window.addEventListener('mousemove', function (res) {

// console.log(res);

var x = res.clientX;

var y = res.clientY;

var movesx=x-width_2;

var movesy=y-height_2;

console.log('x周');

container.style.transform="rotatex("+-movesy/5+"deg) rotateY("+movesx/5+"deg)";

console.log(x);

console.log(width_2);

console.log(movesx);

// console.log('44444')

// console.log(movesx);

// console.log(movesy);

})

w.onclick = function () {

container.className = "w"

};

// var adv={

//  a:0,

//  s:-4,

//    rotate1:0,

//    rotate2:'-30',

//  he:function (){

//      this.rotate1+=.2;

//        console.log(this.rotate1);

//  container.style.transform="rotatex("+this.rotate1+"deg)";

//  },

//  zhuan:function (){

//      s=setInterval(this.he.bind(this),150);

//  },

//  danji:function(){

//  }

//  }

//  adv.zhuan();