首页 > 文章 > web前端 > 使用 html css 和 javascript 的图像轮播旋转幻觉

使用 html css 和 javascript 的图像轮播旋转幻觉

Mary-Kate Olsen原创: 2024-11-07 14:05:03351浏览

Image carousel rotation illusion using html css and javascript

代码

<html lang="zh-cn">
<头>


<title>旋转图像轮播</title>

    身体 {
        显示：柔性；
        调整内容：居中；
        对齐项目：居中；
        高度：100vh；
        保证金：0；
        背景颜色：#0d0d0d；
        溢出：隐藏；
        过渡：背景图像 0.5 秒缓和；
        背景大小：封面；
        背景位置：中心；

    }

    /* 轮播容器 */
    .轮播{
        位置：相对；
        宽度：130px；
        高度：130像素；
        变换风格：保留 3d；
        视角：1000px；
        过渡：变换1s；
    }

    /* 图像样式 */
    .carousel img {
        位置：绝对；
        高度：100%；
        宽度：100%；
        /* 宽度: 150px;
        高度：150px； */
        边框半径：10px；
        盒子阴影: 0 0 10px rgba(255, 110, 199, 0.3);
        变换原点：中心；
        过渡：变换0.5s，过滤0.5s；
        不透明度：0.8；
    }

    /* 围绕 Y 轴定位每个图像 */
    .carousel img：nth-child（1）{ 变换：rotateY（0deg）translateZ（150px）; }
    .carousel img：nth-child（2）{ 变换：rotateY（72deg）translateZ（150px）; }
    .carousel img：nth-child（3）{ 变换：rotateY（144deg）translateZ（150px）; }
    .carousel img：nth-child（4）{ 变换：rotateY（216deg）translateZ（150px）; }
    .carousel img：nth-child（5）{ 变换：rotateY（288deg）translateZ（150px）; }

    /* 控制图标 */
    .controls {
        位置：绝对；
        底部：20px；
        左：20 像素；
        显示：柔性；
        间隙：10px；
    }
    .controls按钮{
        宽度：40px；
        高度：40px；
        字体大小：18px；
        边框：无；
        背景颜色：#181616；
        颜色：#fff；
        光标：指针；
        边界半径：50%；
        过渡：背景色0.3s；
    }
    .controls按钮：悬停{
        背景颜色：#555；
    }
</风格>
</头>


<div>




          </div>

以上是使用 html css 和 javascript 的图像轮播旋转幻觉的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript css html Filter using pointer display position overflow margin border viewport background transform transition flex

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：How to Toggle Element Visibility in React Using State Management?下一篇：How do bitwise operators in JavaScript work?

查看更多