Html 3D旋转相册制作

2023-08-30 233

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 这篇博客针对<<Html 3D旋转相册制作>>编写代码，代码整洁，规则，易读。学习与应用推荐首选。

程序示例精选

Html 3D旋转相册制作

如需安装运行环境或远程调试，可点击右边博主头像或昵称进入个人主页查看博主联系方式，由专业技术人员远程协助！

前言

这篇博客针对<<Html 3D旋转相册制作>>编写代码，代码整洁，规则，易读。学习与应用推荐首选。

文章目录

一、所需工具软件

二、使用步骤

1. 导入相片文件

2. 代码实现

3. 运行结果

三、在线协助

一、所需工具软件

1. 浏览器

2. Html代码编辑器

二、使用步骤

1.导入相片文件

将相片文件放入images文件夹：

编辑

2.代码实现

代码如下（示例）：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>3D旋转</title>
    <style type="text/css">
        *{padding: 0;
        margin: 0;}
        body,html{height:100%;}
        body{background-image: url("images/b1.png");background-size: 100% 100%;}
        #box{width: 280px;
            height: 400px;
            position: fixed;
            left: 0;
            right: 0;
            top:0;
            bottom: 0;
            margin: auto;
            transform-style: preserve-3d;
            transform: rotateX(0deg) rotateY(0deg);
            animation: go 45s linear infinite;
           }
        #box img{width: 380px;
                 height: 400px;
                 position: absolute;
                 left: 0;
                 top: 0;
                 border-radius: 55px;
        }
        #box img:nth-child(1){
            transform: rotateY(0deg) translateZ(650px);}
        #box img:nth-child(2){
            transform: rotateY(36deg) translateZ(650px);}
        #box img:nth-child(3){
            transform: rotateY(72deg) translateZ(650px);}
        #box img:nth-child(4){
            transform: rotateY(108deg) translateZ(650px);}
        #box img:nth-child(5){
            transform: rotateY(144deg) translateZ(650px);}
        #box img:nth-child(6){
            transform: rotateY(180deg) translateZ(650px);}
        #box img:nth-child(7){
            transform: rotateY(216deg) translateZ(650px);}
        #box img:nth-child(8){
            transform: rotateY(252deg) translateZ(650px);}
        #box img:nth-child(9){
            transform: rotateY(288deg) translateZ(650px);}
        #box img:nth-child(10){
            transform: rotateY(324deg) translateZ(650px);}
    }
    </style>
</head>
  <body>
    <div id="box">
        <img src="images/1.jpg">
        <img src="images/2.jpg">
        <img src="images/3.jpg">
        <img src="images/4.jpg">
        <img src="images/5.jpg">
        <img src="images/6.jpg">
        <img src="images/7.jpg">
        <img src="images/8.jpg">
        <img src="images/9.jpg">
        <img src="images/10.jpg">
    </div>
  </body>
</html>

3.运行结果如下：

编辑

三、在线协助：

如需安装运行环境或远程调试，见文章底部微信名片，由专业技术人员远程协助！

三、在线协助：

如需安装运行环境或远程调试， 可点击右边 博主头像 或昵称， 进入个人主页查看博主联系方式 ，由专业技术人员远程协助！ 1）远程安装运行环境，代码调试
2）Qt, C++, Python入门指导 3）界面美化 4）软件制作

博主推荐文章：python人脸识别统计人数qt窗体-CSDN博客

博主推荐文章：Python Yolov5火焰烟雾识别源码分享-CSDN博客

Python OpenCV识别行人入口进出人数统计_python识别人数-CSDN博客

个人博客主页：alicema1111的博客_CSDN博客-Python,C++,网页领域博主

博主所有文章点这里：alicema1111的博客_CSDN博客-Python,C++,网页领域博主

Html 3D旋转相册制作

前言

文章目录

一、所需工具软件