WechatIMG150.jpeg
代码如下
<!doctype html>
<html>
<head>
<title>标题</title>
<meta charset="utf-8">
<style>
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(http://static.game-park.net/static/img/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);
}
</style>
</head>
<body>
<div id="stage">
<div id="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="chiod"></div>
<div class="chiod"></div>
<div class="chiod"></div>
<div class="chiod"></div>
<div class="chiod"></div>
<div class="chiod"></div>
</div>
</div>
<script>
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;
container.style.transform = "rotatex(" + -movesy / 5 + "deg) rotateY(" + movesx / 5 + "deg)";
})
</script>
</body>
</html>
关于transform-style 属性 可以看 transform-style
网友评论