web前端：3d立体旋转+源码+详解

前端嘻嘻哥

已于 2022-12-23 21:17:13 修改

阅读量1.9k

点赞数 2

文章标签：前端 3d css3

于 2022-12-23 21:08:33 首次发布

本文链接：https://blog.youkuaiyun.com/xixi1811/article/details/128424229

版权

本文介绍了如何使用CSS3创建3D立体旋转效果，通过移动图片中心点并进行旋转，构建出立体的视觉体验。详细步骤和源码一并提供。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路：

直接插入代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 定义动画，名字run， 旋转360度：X、Y、Z（X、Y有Z的视觉感觉，不用写Z）   */
        @keyframes run {
            0% {
                transform: rotateX(0deg) rotateY(0deg);
            }
            100% {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
        ul {
            position: relative;
            width: 200px;