标签：木马 translateZ 示例 500px 100% transform rotateY background css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*透视*/
body {
perspective: 1000px;
}
.box {
position: relative;
width: 300px;
height: 200px;
margin: 300px auto;
/*子元素保持3D效果*/
transform-style: preserve-3d;
animation: rotate 20s linear infinite;
}
/*.box:hover {*/
/* animation-play-state: paused;*/
/*}*/
@keyframes rotate {
0% {
}
100% {
transform: rotateY(360deg);
}
}
[class*="horse"] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.horse1 {
background: url("./images/horse1.jpg") no-repeat;
background-size: 100%;
/*把正面的图像拉近一点，越靠近 眼睛*/
transform: translateZ(500px);
}
.horse2 {
background: url("./images/horse2.jpg") no-repeat;
background-size: 100%;
/*先转动，再移动*/
transform: rotateY(60deg) translateZ(500px);
}
.horse3 {
background: url("./images/horse3.jpg") no-repeat;
background-size: 100%;
transform: rotateY(120deg) translateZ(500px);
}
.horse4 {
background: url("./images/horse4.jpg") no-repeat;
background-size: 100%;
transform: rotateY(180deg) translateZ(500px);
}
.horse5 {
background: url("./images/horse5.jpg") no-repeat;
background-size: 100%;
transform: rotateY(240deg) translateZ(500px);
}
.horse6 {
background: url("./images/horse6.jpg") no-repeat;
background-size: 100%;
transform: rotateY(300deg) translateZ(500px);
}
</style>
</head>
<body>
<div class="box">
<div class="horse1"></div>
<div class="horse2"></div>
<div class="horse3"></div>
<div class="horse4"></div>
<div class="horse5"></div>
<div class="horse6"></div>
</div>
<script>
const horses = document.querySelectorAll('[class*=horse]')
for (let i = 0; i < horses.length; i++) {
horses[i].addEventListener('mouseenter', function () {
this.style.transform = 'scale(3)'
})
}
for (let i = 0; i < horses.length; i++) {
horses[i].addEventListener('mouseleave', function () {
// 鼠标离开后，还原成1倍，并且旋转角度、移动的位置都要还原
//element.style.transform +=相当于给transform追加值
this.style.transform = 'scale(1) '
this.style.transform += `rotateY(${i * 60}deg)`
this.style.transform += 'translateZ(500px)'
})
}
</script>
</body>
</html>
标签：木马,
translateZ,
示例,
500px,
100%,
transform,
rotateY,
background,
css
From： https://www.cnblogs.com/bangbangzoutianya/p/17570451.html