草庐IT

旋转相册的制作

恁.. 2023-04-09 原文

3D立体旋转相册？

相信好多程序员都会制作一个3D旋转相册来送给自己的女朋友，或许这就是程序员的浪漫吧，那么你会不会也想自己手动敲出那些炫酷的代码呢？

今天小编就分享3d旋转相册的炫酷代码，废话不多说，只要一台电脑就可以实现，还请大家多多支持哦！小编也祝你和你的那个他（她）有情人终成眷属哦。
　　

废话不多说，整活

1.首先建一个文件夹

 

2.在这个文件夹中，再创建一个文件夹img，用来存放要使用的图片，同级目录下还需创建一个文档。注意的是需要将文档后缀名改为html，如图所示

 

3.将你需要的图片放在img文件夹里面

4.然后在index.html拖到vscode里面进行编辑，复制以下代码

<!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>
        body{ 
            perspective: 800px;
        }
        section {
            width: 300px;
            height: 200px;
            margin: 400px auto;
            position: relative;
            transform-style: preserve-3d;
            animation: rotate 10s linear infinite;
            background-image: url(./img/d8a11469cd936689a6248e8943c5ce22.jpg);
            background-size: contain;
        }
        section:hover{ 
            animation-play-state: paused;
        }
        @keyframes rotate{ 
            0%{
                transform: rotateY(0);
            }
            100%{
                transform: rotateY(360deg);
            }
        }
        div{ 
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            
        }
        div:nth-child(1) {
            background-image: url(./img/64d12fb3d6794fb3bf48214984378123.png);
            transform: translateZ(500px);
        }
        div:nth-child(2) {
            background-image: url(./img/64d12fb3d6794fb3bf48214984378123.png);
            transform:rotateY(60deg) translateZ(500px);
        }
        div:nth-child(3) {
            background-image: url(./img/64d12fb3d6794fb3bf48214984378123.png);
            transform:rotateY(120deg) translateZ(500px);
        }
        div:nth-child(4) {
            background-image: url(./img/64d12fb3d6794fb3bf48214984378123.png);
            transform:rotateY(180deg) translateZ(500px);
        }
        div:nth-child(5) {
            background-image: url(./img/64d12fb3d6794fb3bf48214984378123.png);
            transform:rotateY(240deg) translateZ(500px);
        }
        div:nth-child(6) {
            background-image: url(./img/64d12fb3d6794fb3bf48214984378123.png);
            transform:rotateY(300deg) translateZ(500px);
        }

    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>
</html>

在url里面放你需要的相册，只需要在./img/后面写你自己相册的名字就可以了。

 5.写好之后直接保存退出，双击你的index.html文件就可以看到效果了哦。

效果图如下：

 在浏览器里是会旋转的哦，大家快试试哦，送给你心爱的那个她（他）吧，去送一份惊喜吧。

html和css真的很炫酷，对于没有接触过的人来说是有点困难，但是如果感兴趣的，深入了解一下就会发现它的奇妙之处，会制作很多炫酷的效果哦。

旋转制作nbspltgt

有关旋转相册的制作的更多相关文章

  1. 旋转矩阵的几何意义 - 2

    点向量坐标矩阵的几何意义介绍旋转矩阵的几何含义之前，先介绍一下点向量坐标矩阵的几何含义点：在一维空间下就是一个标量，如同一条直线上，以任意某一个位置为0点，以一定的尺度间隔为1，2，3...,相反方向为-1，-2，-3...；如此就形成了一维坐标系，这时候任何一个点都可以用一个数值表示，如点p1=5，即即从原点出发沿着x轴正方向移动5个尺度；点p2=-3，负方向移动3个尺度；     在一维坐标系上过原点做垂直于一维坐标系的直线，则形成了二维坐标系，此时描述一个点需要两个数值来表示点p3=（3，2），即从原点出发沿着x轴正方向移动3个尺度，在此基础上沿着y轴正方向移动两个尺度的位置就是点p3。

  2. Unity 3D 制作开关门动画,旋转门制作,推拉门制作,门把手动画制作 - 2

    Unity自动旋转动画1.开门需要门把手先动,门再动2.关门需要门先动,门把手再动3.中途播放过程中不可以再次进行操作觉得太复杂?查看我的文章开关门简易进阶版效果:如果这个门可以直接打开的话,就不需要放置"门把手"如果门把手还有钥匙需要旋转,那就可以把钥匙放在门把手的"门把手",理论上是可以无限套娃的可调整参数有:角度,反向,轴向,速度运行时点击Test进行测试自己写的代码比较垃圾,命名与结构比较拉,高手轻点喷,新手有类似的需求可以拿去做参考上代码usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;u

  3. 动漫制作技巧如何制作动漫视频 - 2

    动漫制作技巧是很多新人想了解的问题，今天小编就来解答与大家分享一下动漫制作流程，为了帮助有兴趣的同学理解，大多数人会选择动漫培训机构，那么今天小编就带大家来看看动漫制作要掌握哪些技巧？一、动漫作品首先完成草图设计和原型制作。设计草图要有目的、有对象、有步骤、要形象、要简单、符合实际。设计图要一致性，以保证制作的顺利进行。二、原型制作是根据设计图纸和制作材料，可以是手绘也可以是3d软件创建。在此步骤中，要注意的问题是色彩和平面布局。三、动漫制作制作完成后，加工成型。完成不同的表现形式后，就要对设计稿进行加工处理，使加工的难易度降低，并得到一些基本准确的概念，以便于后续的大样、准确的尺寸制定。四、

  4. ruby - 如何在ruby中制作动态多维数组？ - 2

    我有一个关于多维数组的初学者ruby​​问题。我想按年份和月份对条目进行排序。所以我想创建一个包含年->月->月条目的多维数组所以数组应该是这样的:2009->08->Entry1->Entry209->Entry32007->10->Entry5现在我有:@years=[]@entries.eachdo|entry|timeobj=Time.parse(entry.created_at.to_s)year=timeobj.strftime("%Y").to_imonth=timeobj.strftime("%m").to_itmparr=[]tmparrentry}@years.pu

  5. ruby - 如何在不使用 HERE-DOCUMENT 语法的情况下在 Ruby 中制作多行字符串文字？ - 2

    问题总结我想尝试使用Ruby来完成我在Python中所做的事情。在Python中它有r"""syntaxtosupportrawstrings，这很好，因为它允许将原始字符串与代码内联，并以更自然的方式连接它们，而无需特殊缩进。在Ruby中，当使用原始字符串时，必须使用其次是EOT在单独的行中，这会破坏代码布局。你可能会问，为什么不使用Ruby的%q{}？嗯，因为%q{}与Python的r"""相比有局限性因为它不会转义多个\\\并且只处理单个\.我正在动态生成Latex代码并写入一个文件，该文件稍后用pdflatex编译。Latex代码包含类似\\\的内容在许多地方。如果我使用Rub

  6. ruby - 如何制作 Ruby 1.8 小写非拉丁字符？ - 2

    我正在使用Ruby1.8。似乎downcase不会改变非拉丁字符。例如:"Δ".downcase返回“Δ”我知道在Ruby1.9.1及更高版本中，我可以使用UnicodeUtils(fromhere)。我试过了，它工作正常。返回上一个示例的"δ"。是否有适用于1.8Ruby的等效(或任何)解决方案？ 最佳答案 nash@nash:~$ruby-vruby1.8.7(2011-02-18patchlevel334)[i686-linux]gem安装unicode(https://rubygems.org/gems/unicode)re

  7. ruby - 如何使用 pager 制作 ruby​​ 命令行应用程序？ - 2

    我正在使用Ruby制作一个命令行工具。它将在屏幕上打印大量文本。目前，我正在使用shell管道(may_app|more)来执行此操作。但我认为最好有一个默认的寻呼机。就像你在执行gitlog时看到的一样。可以使用git--nopagerlog禁用寻呼机。我已经完成了大量的谷歌工作并找到了一颗gem:hirb,但似乎有点矫枉过正。经过多次尝试，我目前正在使用shellwrapper来这样做:#!/bin/bash#xray.rbisthecorescript#doingthemainlogicandwill#outputmanyrowsoftexton#screenXRAY=$HOME

  8. ruby - 制作命令行程序 "full screen" - 2

    我想知道如何在shell中创建“全屏”窗口的外观，如在vim、emacs等中。是否可以在Ruby中以编程方式执行此操作？这对平台的依赖程度如何？编辑:我不是在寻找如何让我的shell进入全屏模式。我正在寻找一种方法来隐藏以前输入的命令并用应用程序“填充”shell屏幕。它适用于安装程序。 最佳答案 您可能正在寻找的是ncurses或S-Lang支持提供你的全TUI经验。Ruby的gem环境提供了几个可能值得探索的gem:$gemlist--remote|grep-icursescursesx(003)ffi-ncurses(0.4.

  9. ruby - 如何制作同时针对 MRI 和 JRuby 的 gem？ - 2

    我想制作一个gem，当其他人尝试将它与MRI一起使用时，它将使用C代码，而当他们从JRuby中使用它时，它将使用Java代码。nokogiri和pumagems就是这样做的，我看过他们的代码，但没有看到他们是如何实现的。 最佳答案 这是通过使用rvm(或其他类似工具在rubies之间切换)和rake-compiler为您针对的不同平台交叉编译gem来完成的。.gemspec文件必须指定每个平台所需的文件；这是通过检查gem正在编译的平台来完成的:Gem::Specification.newdo|gem|#...ifRUBY_PLAT

  10. 欧拉角、旋转矩阵及四元数 - 2

    欧拉角、旋转矩阵及四元数1.简介2.欧拉角2.1欧拉角定义2.2右手系和左手系2.3转换流程3.旋转矩阵4.四元数4.1四元数与欧拉角和旋转矩阵之间等效变换4.2测试Matlab代码5.总结1.简介常用姿态参数表达方式包括方向余弦矩阵、欧拉轴/角参数、欧拉角、四元数以及罗德里格参数等。高分辨率光学遥感卫星主要采用欧拉角与四元数对姿态参数进行描述。这里着重讲解欧拉角、旋转矩阵和四元数。2.欧拉角2.1欧拉角定义欧拉角是表征刚体旋转的一种方法之一，由莱昂哈德·欧拉引入的三个角度，用于描述刚体相对于固定坐标系的方向。在摄影测量、空间科学或其它技术领域，一般用一组（三个）欧拉角描述两个空间坐标之间的旋

随机推荐