CSS实现旋转动画
HTML和CSS实现动画效果1
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@keyframes content_r {
0% {
transform: rotateX(90deg) rotate(0deg);
}
100% {
transform: rotateX(90deg) rotate(360deg);
}
}
@keyframes egg_r {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
.cylinder-container {
position: absolute;
perspective: 800px;
-webkit-perspective-origin: 50% 38px;
perspective-origin: 50% 50%;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-webkit-perspective-origin: 50% 50%;
}
.cylinder {
width: 160px;
height: 160px;
margin: 0 auto;
transform-style: preserve-3d;
animation: content_r 10s linear infinite;
-webkit-transform-style: preserve-3d;
-webkit-animation: content_r 10s linear infinite;
border: 1px solid red;
object-fit: cover;
}
.rectangle-img {
position: absolute;
backface-visibility: visible;
transform-style: preserve-3d;
-webkit-backface-visibility: visible;
-webkit-transform-style: preserve-3d;
transform-origin: center center;
-webkit-transform-origin: center center;
left: 29px;
top: 13px;
}
.rectangle-img img {
width: 100px;
transform-origin: center;
animation: egg_r 10s linear infinite;
-webkit-transform-origin: center;
/* -webkit-animation: egg_r 10s linear infinite; */
}
.rectangle-img:first-of-type {
transform: rotate(0deg) translateX(120px) rotateX(-90deg) rotateY(0deg);
-webkit-transform: rotate(0deg) translateX(120px) rotateX(-90deg) rotateY(0deg);
}
.rectangle-img:nth-of-type(2) {
transform: rotate(60deg) translateX(120px) rotateX(-90deg) rotateY(60deg);
-webkit-transform: rotate(60deg) translateX(120px) rotateX(-90deg) rotateY(60deg);
}
.rectangle-img:nth-of-type(3) {
transform: rotate(120deg) translateX(120px) rotateX(-90deg) rotateY(120deg);
-webkit-transform: rotate(120deg) translateX(120px) rotateX(-90deg) rotateY(120deg);
}
.rectangle-img:nth-of-type(4) {
transform: rotate(180deg) translateX(120px) rotateX(-90deg) rotateY(180deg);
-webkit-transform: rotate(180deg) translateX(120px) rotateX(-90deg) rotateY(180deg);
}
.rectangle-img:nth-of-type(5) {
transform: rotate(240deg) translateX(120px) rotateX(-90deg) rotateY(240deg);
-webkit-transform: rotate(240deg) translateX(120px) rotateX(-90deg) rotateY(240deg);
}
.rectangle-img:nth-of-type(6) {
transform: rotate(300deg) translateX(120px) rotateX(-90deg) rotateY(300deg);
-webkit-transform: rotate(300deg) translateX(120px) rotateX(-90deg) rotateY(300deg);
}
.center-img {
position: absolute;
width: 150px;
height: 150px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 10;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
border-radius: 10px;
object-fit: cover;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="cylinder-container">
<div class="cylinder">
<div class="rectangle-img"><img class="rectangle"
src="https://picsum.photos/200/200?random=4" alt=""
class="isNotLoginDom"></div>
<div class="rectangle-img"><img class="rectangle"
src="https://picsum.photos/200/200?random=4" alt=""
class="isNotLoginDom"></div>
<div class="rectangle-img"><img class="rectangle"
src="https://picsum.photos/200/200?random=4" alt=""
class="isNotLoginDom"></div>
<div class="rectangle-img"><img class="rectangle"
src="https://picsum.photos/200/200?random=4" alt=""
class="isNotLoginDom"></div>
<div class="rectangle-img"><img class="rectangle"
src="https://picsum.photos/200/200?random=4" alt=""
class="isNotLoginDom"></div>
<div class="rectangle-img"><img class="rectangle"
src="https://picsum.photos/200/200?random=4" alt=""
class="isNotLoginDom"></div>
</div>
<img class="center-img" src="https://picsum.photos/200/200?random=4" alt="Center Image D">
</div>
</body>
</html>
HTML和CSS实现动画效果2
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.elevator {
position: fixed;
top: 150px;
left: 150px;
perspective: 1000px;
transform-style: preserve-3d;
.xzbg {
position: relative;
top: -100px;
left: -33px;
width: 150px;
height: 150px;
transform-style: preserve-3d;
img {
width: 100%;
}
z-index: -1;
/* animation: rotate 0s linear infinite; */
}
}
.section {
position: relative;
top: 0;
left: -33px;
width: 150px;
height: 150px;
transform-style: preserve-3d;
animation: rotate 5s linear infinite;
}
.xzimg {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
background-size: 100%;
object-fit: cover;
}
img {
width: 100%;
}
.section .xzimg:nth-child(1) {
transform: rotateY(0) translateZ(150px);
}
.section .xzimg:nth-child(2) {
transform: rotateY(60deg) translateZ(150px);
}
.section .xzimg:nth-child(3) {
transform: rotateY(120deg) translateZ(150px);
}
.section .xzimg:nth-child(4) {
transform: rotateY(180deg) translateZ(150px);
}
.section .xzimg:nth-child(5) {
transform: rotateY(240deg) translateZ(150px);
}
.section .xzimg:nth-child(6) {
transform: rotateY(300deg) translateZ(150px);
}
.section .xzimg:nth-child(7) {
transform: rotateY(360deg) translateZ(150px);
}
@keyframes rotate {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(-360deg);
}
}
.circle {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
position: fixed;
bottom: 50px;
left: calc(50% - 25px);
transition: transform 5s linear;
}
.btn-box {
position: fixed;
bottom: 10px;
left: 50%;
transform: translate(-50%, 0);
text-align: center;
}
.center-img {
position: absolute;
width: 150px;
height: 150px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 10;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
border-radius: 10px;
object-fit: cover;
border: 1px solid red;
}
</style>
<body>
<div class="elevator">
<div class="section">
<div data-index="1" class="xzimg"><img src="https://picsum.photos/200/200?random=4" alt=""></div>
<div data-index="1" class="xzimg"><img src="https://picsum.photos/200/200?random=4" alt=""></div>
<div data-index="1" class="xzimg"><img src="https://picsum.photos/200/200?random=4" alt=""></div>
<div data-index="1" class="xzimg"><img src="https://picsum.photos/200/200?random=4" alt=""></div>
<div data-index="1" class="xzimg"><img src="https://picsum.photos/200/200?random=4" alt=""></div>
<div data-index="1" class="xzimg"><img src="https://picsum.photos/200/200?random=4" alt=""></div>
</div>
<!-- 中心的图 -->
<img class="center-img" src="https://picsum.photos/200/200?random=4" alt="Center Image D">
</div>
<div class="btn-box">
<button onclick="launch()">发射按钮</button>
</div>
<div class="circle" id="ball"></div>
<script>
const ball = document.getElementById("ball");
const section = document.querySelector(".section");
const rotatingImages = document.querySelectorAll(".section div");
let ballTop = window.innerHeight - 100;
let interval;
// 启动球的运动
function launch() {
ball.style.transform = `translateY(-${ballTop}px)`;
interval = setInterval(moveUp, 20);
}
// 球的上升函数
function moveUp() {
ballTop += 1;
ball.style.bottom = `${ballTop}px`;
checkCollision();
}
// 检测球与旋转图像的碰撞
function checkCollision() {
const rectBall = ball.getBoundingClientRect();
let collisionDetected = false;
rotatingImages.forEach(image => {
const rectImage = image.getBoundingClientRect();
if (
rectBall.top <= rectImage.bottom &&
rectBall.bottom >= rectImage.top &&
rectBall.right >= rectImage.left &&
rectBall.left <= rectImage.right
) {
clearInterval(interval);
collisionDetected = true;
const imageIndex = image.getAttribute("data-index");
alert(`碰撞图片编号: ${imageIndex}`);
}
});
if (collisionDetected) clearInterval(interval); // 停止上升
}
</script>
</body>
</html>
posted on 2025-05-21 13:46 IT丶Hatcher 阅读(12) 评论(0) 收藏 举报
浙公网安备 33010602011771号