html 照片环 - 图片的动态3D环绕

引言
一、源码
二、图转base64
参考链接

引言

效果展示：
在这里插入图片描述

一、源码

原始图片的base64编码字符太多了，博客放不下，将图片缩小后的加入html的源码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>猫咪</title><style>body{background-color: black;text-align: center;color: #FFF;}.jc{/* 设置宽 */width:140px;/* 设置高 */height: 200px;/* 设置背景颜色 *//* background-color: pink; */border: 1px solid black;/* 设置到页面中间 *//* 两个值：第一个控制 上下，第二个值 控制的左右 */margin: 200px auto;    /* 设置景深 */perspective: 1000px;}/* 设置舞台 */.stage{/* 设置宽 */width:140px;/* 设置高 */height: 200px;/* 定位参照 */position: relative;border: 1px solid white;/* 设置三维效果 */transform-style: preserve-3d;/* 如果后续有相同属性值发生变化，要有动画效果的话，加过渡属性  单位s*/transition: 30s;transform: rotateY(-360deg)}/* 使用标签选择器 */img{/* 设置宽 */width:140px;/* 设置高 */height: 200px;/* 定位把图片叠加一起 */position: absolute;left: 0px;top: 0px;/* 设置圆角 */border-radius: 10px;/* 设置边框 */border: 1px solid yellow;/* 设置阴影 */box-shadow: 0px 0px 10px yellow;/* 设置倒影 */-webkit-box-reflect: below 20px linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.3));} /* 设置不同的图片 */.img1{/* 先设置旋转 角度单位 deg  再移动 */transform: rotateY(40deg) translateZ(500px);}.img2{/* 先设置旋转 角度单位 deg  再移动 */transform: rotateY(80deg) translateZ(500px);}.img3{/* 先设置旋转 角度单位 deg  再移动 */transform: rotateY(120deg) translateZ(500px);}.img4{/* 先设置旋转 角度单位 deg  再移动 */transform: rotateY(160deg) translateZ(500px);}.img5{/* 先设置旋转 角度单位 deg  再移动 */transform: rotateY(200deg) translateZ(500px);}.img6{/* 先设置旋转 角度单位 deg  再移动 */transform: rotateY(240deg) translateZ(500px);}.img7{/* 先设置旋转 角度单位 deg  再移动 */transform: rotateY(280deg) translateZ(500px);}.img8{/* 先设置旋转 角度单位 deg  再移动 */transform: rotateY(320deg) translateZ(500px);}.img9{/* 先设置旋转 角度单位 deg  再移动 */transform: rotateY(0deg) translateZ(500px);}</style></head><body><!-- 页面所有内容 --><!-- 容器盒子 剧场 使用class属性取个名字--><div class="jc"><!-- 舞台 --><div class="stage" onclick="handleClick()" id="stage"><img class="img1" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAAGYktHRAD/AP8A/6C9p5MAAAAHdElNRQfpBQ4KORdVYJUCAAAAAW9yTlQBz6J3mgAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyNS0wNS0xNFQxMDo1NzoyMyswMDowMFdB0OEAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjUtMDUtMTRUMTA6NTc6MjMrMDA6MDAmHGhdAAAAKHRFWHRkYXRlOnRpbWVzdGFtcAAyMDI1LTA1LTE0VDEwOjU3OjIzKzAwOjAwcQlJggAABRlJREFUOE9NlVlsVGUUx393mbl3ls5MV8rSnUKhgKCNICHIIhIUCRIVtygQEGPUaAz6oFE0JhoSQ4hGHzRqtC8a3NCCAQxIKCAGKC1YugBdoIUuQztbZ73Xc/HFm5zch7nfOef/O//zjfLz0YO2raq4XC7+/9i2ffutqgqa5kZRlNthKRaqopIXCHKl7RylZZXkbNU5gKZqqLrhkh8DaC43TgonkROqFFE1XUKSaS5sRZOQwrgJ+gN88NIrfPvuTq53deIzTEKGQUUwhHry0CHe27yZgfbzhPJDuAwPLo8fjy+IX4qZdhoj0osnMYQ3G0dJjPLyY48TIsX6pXWkMhb5UtgvRbO5DEpj015796s7CEiSQNBky7aNmMTo6x9mfHiUqvICrl4Lk5/vJ5tV+OXQGeJJhafXLSY1Nkrto88xxRfA7TYdfSgHW07b3+36kDvL8zl04h86rwxQIIenTSuhotSH7VSWRNcGwhQWBpmYSOJx6VRPCshxm8XbX8dMTGB6vBiGFzU9McHsJUtp77pGzsqJbD8V00oJ+H3CTsUQ3oODw4QCHrymC12GFI0muTk8RjSSwJTONJGcyaSEt3BPp1MsWLSISx09jEej5PkNNJmk262TTeeYO7uWuXVVFAW8BEy3JHCh6QrXw0niwmyKqWJ6fXhMv6MY1bJz6DIls6hQOtQpDgaxVZ3xcIzmv7spmz6bp7ZuoeXCZU60dNN/fZCSAh+RWAy/cD+17wtJkkaESNx2h0Zb81ECXhc+n5fxeIKTzUc48NdZFs2ZypTqeiZX1nP/igYunD/N1IIo/QOjlE8tJJW16Om8SuTGBelaFx8qjkdVOttasaSrtauXMrO6kg0r61lbr3JtOErRpCmkUilmzrtLbFIrvELkFDeG26C4wENsIoNL5Dr8cjkL3RITx6IT7N79FqGiySjRYb78+le8vV3UNTQQT8TRDB/LH3wEwzRo/KoRj1sTpsISi87eEfx5hdiWWEZ0q4gxly1rEPVeJlq/JyJTf3b7VtwygAee2ETXTx8x+Nl2ItERlqxez443d7CgrkTkZRmTaTvWsbIJUokouWQK5diJ47aejQgbLz7h2Nd6nHDMonLOQnSXRyqmCZ9tYurKF+RgEkMGERvp5/iBvRz+4wwbn3mYTPIWMxs2iHWyqJHBXnTHP7oX3czjcut5BmWSmVg/0ZErxEcu4SopYPTKGWLhG0RH+wWBycL71rHrk/fZd7CZfb+fQs2FCQ91o/y2t9EOhDxUlldg6uDJCwqbDLF4inOH9zCtfBbB4jJhpGD6i3F788hkc7Rf7GbPp59z7PhZRiJxoQmbNj6E0tF6xLYzY1IhiT9/usiUDRG4znU2NtTD22+8Rt/NiODIYzyRpmFelVBT+ObHP2VzvFLIIinr6PV7qamu+c+H/mA5+aX1WLZAzkXkoxTpdJJJ0l39ojUcPddDU3Mbzec6aOsYoqBkBreiCRTZDGe3nZWtqqzgjlk1aC9ue3KnaUrDmgxAwlLEDnYC1Y6STiZZtWYtPs0iMhKmrraG6TNm0NS0n3d2PM/8udXsP3KKpCDoE+41FWUi+exB29Cy+AKTZexjxFO63IWm7LIiRnXEZWlv/oFA6Sx0t4+W85dYsWolKAYtZ5q53NXD8GiY+rnzuXvxcpTB3ovO/SwfyPWeTsgeG7KbSWEhO67L30Imyse79rDk3nuom79ELgCLtNhDEdDOre4UtDJxRiRpQdl8/gW1RBv5LATDfAAAAABJRU5ErkJggg==
" /><img class="img2" src="data:image/png;base64,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
" /><img class="img3" src="data:image/png;base64,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
" /> <img class="img4" src="data:image/png;base64,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
" /><img class="img5" src="data:image/png;base64,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
" /><img class="img6" src="data:image/png;base64,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
" /><img class="img7" src="data:image/png;base64,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
" /><img class="img8" src="data:image/png;base64,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
" /><img class="img9" src="data:image/png;base64,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
" /></div><script>var rotate = 0;function handleClick() {var div = document.getElementById('stage');if(rotate == 0){div.style.transform = 'rotateY(360deg)'rotate = 1;}else{div.style.transform = 'rotateY(-360deg)'rotate = 0;}}</script></div></body>
</html>

二、图转base64

图片转base64编码，下图图片名为cs.jpg，但转为base64前缀为iVBORw0KGgoAA，插入html显示需指定图片格式为png：data:image/png;base64：

import base64with open('cs.jpg', 'rb') as image_file:image_data = image_file.read()base64_data = base64.b64encode(image_data).decode('utf-8')
print(base64_data)

图片转base64需注意，有可能其后缀是.jpg，但实际上是别的文件格式… 比如png文件，后缀为jpg，转为base64编码，使用data:image/jpeg网页无法显示。jpeg转为base64，前缀为/9j/，如果前缀不是这些字符，可能是其他格式的图片，可修改css格式，若不知道是什么格式或css不支持，也可使用画图等工具将其转为jpeg格式。

将图片的base64编码直接嵌入到html文件的css中：https://blog.csdn.net/itigoitie/article/details/125302557

如何在python中将图像编码为base64并插入到HTML中？

文件头标识符—Base64图片编码转File对象：https://juejin.cn/post/7425497083752693794

参考链接

HTML页面设计——动态照片环(推荐)：https://blog.csdn.net/Karid/article/details/128697266
使用CSS和HTML实现3D图片环绕效果：https://blog.csdn.net/2301_79858914/article/details/142893597
实现网页中CSS图片3D旋转效果：https://blog.csdn.net/weixin_34511754/article/details/147769212
CSS—3D环绕旋转动画：https://blog.csdn.net/weixin_46561899/article/details/135555710
CSS----图标3D环绕旋转，近大远小效果：https://blog.csdn.net/weixin_46561899/article/details/135645173
html5实现无限循环图片滑动：https://blog.51cto.com/u_16099232/12107213