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

前端嘻嘻哥

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

阅读量1.6k

点赞数 2

文章标签：前端 3d css3

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

本文链接：https://blog.csdn.net/xixi1811/article/details/128424229

版权

web前端基础专栏收录该内容

11 篇文章 0 订阅

订阅专栏

思路：

直接插入代码：

<!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;
            height: 200px;
            /* 使用3d动画 */
            transform-style: preserve-3d;
            margin: 100px auto;
            /* 动画：动画名称  动画时间  循环次数（无限循环）  变速（匀速） */
            animation: run 5s infinite linear;
        }
        li{
            list-style: none;
            width: 200px;
            height: 200px;
            /* 绝对定位搭建正方体，
            现在的效果是六张图片重叠一起，
            后边每个li样式中添加平移+旋转搭建立方体 */
            position: absolute;
        }
        /* li内第一个子元素 */
        li:first-child {
            background-image: url("1.jpg");
            background-size: 100% 100%;
            /* 前：向前100px*/
            transform: translateZ(100px);
        }
        /* li内第二个子元素··· */
        li:nth-child(2) {
            background-image: url("2.jpg");
            background-size: 100% 100%;
            /* 后：z向后100px，任意旋转180度（图片翻面变正） */
            transform: translateZ(-100px) rotateY(180deg);
        }
        li:nth-child(3) {
            background-image: url("3.jpg");
            background-size: 100% 100%;
            /* 上：向上100px，x轴顺时针90度*/
            transform: translateY(-100px) rotateX(90deg);
        }
        li:nth-child(4) {
            background-image: url("4.jpg");
            background-size: 100% 100%;
            /* 下：向下100px，x轴逆时针90度 */
            transform: translateY(100px) rotateX(90deg);
        }
        li:nth-child(5) {
            background-image: url("5.jpg");
            background-size: 100% 100%;
            /* 左：向左100px，y轴逆时针旋转90度*/
            transform: translateX(-100px) rotateY(-90deg);
        }
        li:nth-child(6) {
            background-image: url("6.jpg");
            background-size: 100% 100%;
            /* 右：向右100px，y轴顺时针旋转90度 */
            transform: translateX(100px) rotateY(90deg);
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

代码段中所有移动100px，都是移动图片的中心点到四个边，然后旋转搭建立方体