web前端：3d立体旋转+源码+详解-Toy模板网

这篇具有很好参考价值的文章主要介绍了web前端：3d立体旋转+源码+详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

思路：

前端3d旋转,前端,3d,css3

直接插入代码：

<!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，都是移动图片的中心点到四个边，然后旋转搭建立方体

前端3d旋转,前端,3d,css3 文章来源地址https://www.toymoban.com/news/detail-519794.html