html 照片环 - 图片的动态3D环绕
引言
效果展示：
一、源码
- 原始图片的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,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="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,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==
" />
</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 base64
with 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
- 文件头标识符—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