前端小练习:案例4.3D图片旋转展示(旋转木马)

这篇具有很好参考价值的文章主要介绍了前端小练习:案例4.3D图片旋转展示(旋转木马)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一.效果预览图

前端小练习:案例4.3D图片旋转展示(旋转木马),css案例,前端,3d

二.实现思路 

1.实现旋转木马效果的第一步是先准备好自己需要的图片,创建html文件

2.旋转木马的实现,关键点在3D形变和关键帧动画。

3.步骤,定义一个div使其居中,,把图片放进div盒子里,因为图片需要3D形变,所以要给div设置3D环境,给图片设置定位或者使用弹性布局使其在相对的位置,要控制图片一定要在div中,否则关键帧动画旋转的时候整体会是倾斜的,根据图片的数量,合理控制图像的旋转角度,(通常使用 360度/图片数量=需要旋转的角度),最后设置z轴的移动距离和关键帧动画。文章来源地址https://www.toymoban.com/news/detail-629401.html

三.相关代码 

<!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>
        *{
            margin: 0;
            padding: 0;
            perspective: 500000px;
            transform-style: preserve-3d;
        }
        .wp{
            width: 800px;
            height: 400px;
            perspective: 500000px;
            transform-style: preserve-3d;
            position: relative;
            margin: 200px auto;
            animation: xz 10s infinite linear;
        }
        img{
            width: 180px;
            height: 300px;
            position: absolute;
            left: 310PX;
        }
        .wp img:nth-child(1){
            transform: rotateY(0) translateZ(400px);
        }
        .wp img:nth-child(2){
            transform: rotateY(-30deg) translateZ(400px);
        }
        .wp img:nth-child(3){
            transform: rotateY(-60deg) translateZ(400px);
        }
        .wp img:nth-child(4){
            transform: rotateY(-90deg) translateZ(400px);
        }
        .wp img:nth-child(5){
            transform: rotateY(-120deg) translateZ(400px);
        }
        .wp img:nth-child(6){
            transform: rotateY(-150deg) translateZ(400px);
        }
        .wp img:nth-child(7){
            transform: rotateY(-180deg) translateZ(400px);
        }
        .wp img:nth-child(8){
            transform: rotateY(-210deg) translateZ(400px);
        }
        .wp img:nth-child(9){
            transform: rotateY(-240deg) translateZ(400px);
        }
        .wp img:nth-child(10){
            transform: rotateY(-270deg) translateZ(400px);
        }
        .wp img:nth-child(11){
            transform: rotateY(-300deg) translateZ(400px);
        }
        .wp img:nth-child(12){
            transform: rotateY(-330deg) translateZ(400px);
        }
        @keyframes xz{
            0%{
                transform: rotateX(-10deg);
            }
            100%{
             transform: rotateX(-10deg) rotateY(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="wp">
         <img src="./image/wallhaven-pkgkkp.png" alt="">
         <img src="./image/wallhaven-pkgkkp.png" alt="">
         <img src="./image/wallhaven-pkgkkp.png" alt="">
         <img src="./image/wallhaven-pkgkkp.png" alt="">
         <img src="./image/wallhaven-pkgkkp.png" alt="">
         <img src="./image/wallhaven-pkgkkp.png" alt="">
         <img src="./image/wallhaven-pkgkkp.png" alt="">
         <img src="./image/wallhaven-pkgkkp.png" alt="">
         <img src="./image/wallhaven-pkgkkp.png" alt="">
         <img src="./image/wallhaven-pkgkkp.png" alt="">
         <img src="./image/wallhaven-pkgkkp.png" alt="">
         <img src="./image/wallhaven-pkgkkp.png" alt="">
    </div>
</body>
</html>

到了这里,关于前端小练习:案例4.3D图片旋转展示(旋转木马)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • html&CSS-----弹性布局案例展示

    目录 前言 效果展示 ​编辑 代码 思路分析         上一期我们学习了弹性布局,那么这一期我们用弹性布局来写一个小案例,下面看代码(上一期链接htmlCSS-----弹性布局_灰勒塔德的博客-CSDN博客) html代码: CSS代码: 首先我们去创建一个大盒子box,作为容器,里面放入5个

    2024年02月12日
    浏览(44)
  • css实现图片的3d旋转-照片墙

      1.html                 这里准备了1个section和7个div,7个div都要求定位在父元素section那里(都在中心点),每个div各一张图,上面效果图有1张在中间的,其余6张图要在周围 2.图片位置摆放- 旋转           6个图片在 周围 ,看起来就像个六边形,所以每个图都间隔

    2024年02月06日
    浏览(102)
  • CSS3实现图片的3D旋转效果

    准备两张图片,尺寸一样大,本代码中是绕 Y 轴进行旋转(也可以改为 X 轴)。 先看看效果:   代码如下:

    2024年02月12日
    浏览(58)
  • 基于html+css的图片展示18

    项目开发工具 Visual Studio Code 1.44.2 版本: 1.44.2 提交: ff915844119ce9485abfe8aa9076ec76b5300ddd 日期: 2020-04-16T16:36:23.138Z Electron: 7.1.11 Chrome: 78.0.3904.130 Node.js: 12.8.1 V8: 7.8.279.23-electron.0 OS: Windows_NT x64 10.0.19044 项目结构 index.html代码如下 总结 此代码可以实现图片的无限重复向下移动展示效果

    2023年04月20日
    浏览(42)
  • 前端开发基础(HTML5 + CSS3)【第一篇】:HTML标签之文字排版、图片、链接、音频、视频 && 涵盖了两个综合案例 做到了基础学得会,实战写的出

    点击前往前端开发基础专栏: 一、开发环境搭建 这里google浏览器不能用我们就使用电脑自带的微软浏览器就可以了! 下载 VS Code VS Code 官网下载地址 这里根据自己电脑的操作系统进行下载! 安装步骤如下: (是在不知道如何操作,可以找个教程一步一步来) 安装这个还是

    2024年04月16日
    浏览(63)
  • HTML5+CSS实现图片3D旋转效果,附音乐

    利用程序呈现图片,可以俘获一众女生的心,增加音乐可以实现图片变化的同时也带上了想要得到效果,如此一程序实乃众人之喜。 先看看程序呈现的效果,还是特别吸引人的。 先在网上爬取想要呈现的美女照片,存放在文件夹img-one,与程序路径一致。 图片像素需进行调整

    2024年02月13日
    浏览(50)
  • css小练习:案例6.炫彩加载

    HTML 写了一个加载动画效果,使用了一个包含多个  span  元素的  div  元素,并为每个  span  元素设置了一个自定义属性  --i 。 这段代码创建了一个简单的动态加载动画,由20个垂直排列的线段组成。每个线段使用一个  span  元素表示,并通过设置不同的  --i  值来控制它

    2024年02月14日
    浏览(33)
  • 前端JS 展示上传图片缩略图(本地图片读取)

    需求: 点击上传图片按钮,选择图片以后,不请求后端接口,直接将图片展示在缩略图中。 解决方案: 使用 FileReader 和 FileReader 中的 readAsDataURL 方法。 第一步 从 input[type=“file”] (上传文件标签) 里面拿到 file 数据,类似下图 第二步 拿到file数据后,执行下面代码 效果展示

    2024年02月15日
    浏览(51)
  • 【前端领域】3D旋转超美相册(HTML+CSS)

    世界上总有一半人不理解另一半人的快乐。 ——《爱玛》 目录 一、前言 二、本期作品介绍    3D旋转相册 三、效果展示 四、详细介绍  五、编码实现 index.html style.css  img  六、获取源码 公众号获取源码  获取源码?私信?关注?点赞?收藏?         新的一年,我们

    2024年02月02日
    浏览(49)
  • 前端3D卡片轮播动画旋转小案例

            这个前端3D卡片轮播动画旋转小案例是一个基于 CSS3 和 JavaScript 实现的交互效果,可以让用户在网页上浏览一组卡片,并通过鼠标或手指滑动来切换卡片。每个卡片都有一个独特的3D旋转效果,可以让用户感受到卡片的立体感和动态效果。         该案例的实现思路

    2024年02月11日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包