css 3d旋转图片(css旋转木马)(详细教程)

这篇具有很好参考价值的文章主要介绍了css 3d旋转图片(css旋转木马)(详细教程)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

成品展示

css 3d旋转图片(css旋转木马)(详细教程)

接下来开始制作旋转老婆图片

一、准备html骨架和基本的css

先准备好html骨架(后面为了挨个测试可以先把后面5个div注释掉)

<div class="bigbox">
        <div><img src="img/w1.jpg" alt=""></div>
        <div><img src="img/w1.jpg" alt=""></div>
        <div><img src="img/w1.jpg" alt=""></div>
        <div><img src="img/w1.jpg" alt=""></div>
        <div><img src="img/w1.jpg" alt=""></div>
        <div><img src="img/w1.jpg" alt=""></div>
</div>

预定义好css样式

/* 初始化所有的盒子间距为0,比较常用 */
* {
    padding: 0;
    margin: 0;
}
/* 设置大盒子的大小 */
.bigbox {
    /*相对位置属性*/
    position: relative;
    width: 300px;
    height: 200px;
    margin: 100px auto;
}
/* 设置所有小盒子的大小及绝对定位(公用的属性) */
.bigbox>div {
    /*绝对位置属性*/
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}
/* 设置图片的大小 */
img {
    width: 100%;
    height: 100%;
}

效果图(所有的div叠加在了一起):

css 3d旋转图片(css旋转木马)(详细教程)

二、开始修饰动画旋转效果

为body设置深景(相当于一个镜头,距离屏幕的距离)

 body {
            /* 设置景深 */
            perspective: 500px;
        }

为大盒子和设置旋转旋转中心+子元素3d属性:

transform-origin: 150px 0 -300px;
transform-style: preserve-3d;

为大盒子添加过渡样式,使盒子变换位置时变得顺滑+易于观察。

 transition: all 5s;

设置鼠标经过样式,用于测试:

.bigbox:hover {
    transform: rotateY(360deg); 
        }

为了测试方便,这里再加一个盒子便于观察:

/* 选择器选出的第二个盒子 */
.bigbox>div:nth-child(2) {
            /* 因为有旋转轴的存在,子盒子只需要调整角度就可以换位置啦~ */
            transform: rotateY(180deg);
        }

进行第一次测试:旋转正面向屏幕的盒子

css 3d旋转图片(css旋转木马)(详细教程)

可以看到,效果非常滴成功~(好耶~)

把剩下的所有盒子加上试试:

        .bigbox>div:nth-child(3) {
            transform: rotateY(120deg);
        }

        .bigbox>div:nth-child(4) {
            transform: rotateY(300deg);
        }

        .bigbox>div:nth-child(5) {
            transform: rotateY(60deg);
        }

        .bigbox>div:nth-child(6) {
            transform: rotateY(240deg);
        }

这个时候,就该改下鼠标经过属性啦~

.bigbox:hover {
            /* transform: rotateY(360deg); */
            /* 设置经过即停模式 */
            animation-play-state: paused;
        }

在给大盒子加上动画属性:

 animation: word 5s infinite linear;

接下来,咱写个动画让它自己转:(注意!上面的“word”对应下面的动画名!)

    /* 设置动画 */
        @keyframes word {
            0% {
                transform: rotateY(0);
            }

            100% {
                transform: rotateY(360deg);
            }
        }

看下最终效果吧~

css 3d旋转图片(css旋转木马)(详细教程)

最后,再把(老婆 )图片放上去,就大功告成啦~

css 3d旋转图片(css旋转木马)(详细教程)

三、最终代码展示

下面是完整代码,整个文件要以".html"文件结尾再打开哦~!

<!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>旋转编制</title>
</head>

<body>
    <style>
        /* 初始化所有的盒子间距为0,比较常用 */
        * {
            padding: 0;
            margin: 0;
        }

        body {
            /* 设置景深 */
            perspective: 500px;
        }

        /* 设置大盒子的大小 */
        .bigbox {
            width: 300px;
            height: 200px;
            margin: 100px auto;


            /* 设置相对定位 */
            position: relative;
            /* 设置旋转中心 */
            transform-origin: 150px 0 -300px;
            /* 设置过渡样式 */
            transition: all 5s;
            /* 设置子元素具备3d属性 */
            transform-style: preserve-3d;
            /* 添加动画 */
            animation: word 5s infinite linear;
        }


        /* 设置动画 */
        @keyframes word {
            0% {
                transform: rotateY(0);
            }

            100% {
                transform: rotateY(360deg);
            }
        }


        /* 设置鼠标经过样式 */
        .bigbox:hover {
            /* transform: rotateY(360deg); */
            /* 设置经过即停模式 */
            animation-play-state: paused;
        }

        /* 设置小盒子的大小及绝对定位 */
        .bigbox>div {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;

            /* 设置旋转中心 */
            transform-origin: 150px 0 -300px;
        }

        /* 设置剩下图片的位置 */
        .bigbox>div:nth-child(2) {
            transform: rotateY(180deg);
        }

        .bigbox>div:nth-child(3) {
            transform: rotateY(120deg);
        }

        .bigbox>div:nth-child(4) {
            transform: rotateY(300deg);
        }

        .bigbox>div:nth-child(5) {
            transform: rotateY(60deg);
        }

        .bigbox>div:nth-child(6) {
            transform: rotateY(240deg);
        }


        /* 设置图片的大小 */
        img {
            width: 100%;
            height: 100%;
        }
    </style>
    <div class="bigbox">
        <!-- img/w1.jpg是图片位置哦! -->
        <div><img src="img/w1.jpg" alt=""></div>
        <div><img src="img/w2.jpg" alt=""></div>
        <div><img src="img/w4.jpg" alt=""></div>
        <div><img src="img/w5.jpg" alt=""></div>
        <div><img src="img/w6.jpg" alt=""></div>
        <div><img src="img/w7.jpg" alt=""></div>
    </div>
</body>

</html>

(测位标靶是静止不动的,便于参照观察,不是网页的属性哦~)文章来源地址https://www.toymoban.com/news/detail-447178.html

到了这里,关于css 3d旋转图片(css旋转木马)(详细教程)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • HTML5+CSS实现图片3D旋转效果,附音乐

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

    2024年02月13日
    浏览(50)
  • 前端 CSS 3D 照片墙自动旋转案例(详细步骤)

    案例动画 Gif 动画地址,图片太大传不上来! 案例 DEMO 源码地址 ,仅供参考。

    2024年01月18日
    浏览(59)
  • 为你心仪的她做一个 “旋转木马“告白相册【零基础纯 CSS3 实现】

          旋转相册效果里面就不放女朋友的美照了防止虐狗 🥰🥰🥰,就用个前端技能树的图片代替哈,有需要大家自行替换。        源码我已经上传到了资源里,有会员的小伙伴直接下载即可,没有会员的小伙伴私聊我“旋转木马”也能获取(免费的),下面是源码资源的

    2024年01月16日
    浏览(54)
  • Unity 3d角色展示脚本(旋转 平移 缩放)展示界面

    不考虑性能 很简陋的一个功能,主要是用于角色渲染的观察用,比simplecontroller要好用一点

    2024年02月11日
    浏览(56)
  • JavaScript、Vue实现大数据大屏展示3D旋转动画效果

    最近在写一些数据大屏的时候客户需要做个3D旋转动效的效果,简单整理之后写了一个小demo做下记录,先看一下效果: 当点击next的时候,整个模块旋转切换到下个菜单,点击prev的时候也可以切换到上一个菜单效果。 首先我们先构建一个大体的dom结构,如下: 编写基本的css样

    2024年02月11日
    浏览(41)
  • 【CSS动画02--卡片旋转3D】

    css动画02--旋转卡片3D 当鼠标移动到中间的卡片上会有随着中间的Y轴进行360°的旋转,以下是几张图片的介绍,上面是鄙人自己录得一个供大家参考的小视频🤭

    2024年02月12日
    浏览(44)
  • CSS 3D旋转正方形

    2024年01月23日
    浏览(40)
  • 【CSS3】CSS3 3D 转换 ④ ( 3D 旋转 rotate3d | rotate3d 语法 | rotate3d 自定义轴旋转 | 元素旋转方向 - 左手准则 | 代码示例 )

    3D 旋转 指的是 在 三维空间坐标系 中 , 绕 X 轴 , Y 轴 , Z 轴 进行旋转 , 同时还可以绕 自定义轴 进行旋转 ; 2D 旋转只能 以 某个点为中心进行旋转 , 3D 旋转可以绕某个轴进行旋转 ; CSS3 中 3D 旋转 语法 : 绕 X 轴旋转 : 沿着 X 轴 正方向 旋转 45 度 ; 绕 Y 轴旋转 : 沿着 Y 轴 正方向

    2024年02月11日
    浏览(47)
  • 【软件实战】5分钟拥有一款自己的软件(教程+成品展示)

    5分钟,看完教程,每个人都能拥有一款属于自己的软件 这是我设计的软件安装程序LOGO 1.Easy code 我们先来写一个简单的按钮跳转网页,看看它能否实现华丽转身 2.网页效果 这是普通HTML网页效果图 3.软件效果 这是变成exe文件的效果 下面是 九芒星_示例软件 的下载链接,好奇

    2024年02月08日
    浏览(57)
  • 纯css实现奥运五环、3D平移、旋转、扭曲

    1、不是真正的五环,因为通过形变得来。 2、不同电脑显示器的像素不同,显现的效果不同。 3、不推荐使用此方法。 4、主要通过旋转加平移的方式实现。

    2024年02月10日
    浏览(47)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包