devbox
小蓝xlanll
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

web前端html+css实现立体旋转相册(表白可用)_web前端3d旋转图片制作教程

作者：小蓝xlanll | 2024-02-15 20:32:23

赞

踩

web前端3d旋转图片制作教程

1、主要用到的属性transform，position

1、transform:translate(X/Y/Z)() ： 向X、Y、Z轴方向做平移
2、transform:rotate(X/Y/Z)() ： 向X、Y、Z轴方向做旋转
3、transform-origin: （） ： 设置旋转轴
4、transform-style:preserve-3d ： 支持3D效果
3、position：relative ：相对定位
5、position：absolute： 绝对定位
6、perspective: 视距

2、搭建主要框架

在这里插入图片描述

首先搭建一个正方体需要6个面那么我们可以先用相对定位和觉得定位将所有图片放到同一位置。例如图中的A位置，然后将相应的图根据 绝对定位 移到相应的位置然后根据 对应的旋转轴 旋转到对应位置。比如B图需要向左移动图片A宽度的像素假设为200px那么就需要 left:-200px 的定义然后定义他的旋转轴为BA相交的线也就是右边 即 transform-origin: right 然后沿着Y轴旋转90° 即 transform:rotateY(90deg) 其他图片也做对应的处理

3、实现旋转

使用@keyframes来设置动画效果form为开始to为结尾，也可以用百分比来设置
@keyframes myAnnimation{
	form{
	}
	to{
	}

  • 1
  • 2
  • 3
  • 4
  • 5

4、代码

这里可以利用伪类让鼠标移动到相册上图片就加一些平移效果让相册的视觉冲击更强烈
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	 body{
	 perspective: 800px;
 	}
	 @keyframes myAnimation {
	 from{
	 transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	 }
	 to{
	 transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
	 }
	 }
	.container{
		width: 400px;
		height: 400px;
		margin: 1000px auto;
		position: relative;
		transform-style: preserve-3d;
		animation: myAnimation 10s infinite linear;

	}
	.container > div{
		width: 400px;
		height: 400px;
		position: absolute;
	}
	.container > div > img {
		float: left;
		width: 200px;
		height: 200px;
	}
	.container > div:nth-child(2){
		left: -400px;
		transform-origin: right;
		transform: rotateY(90deg);
	}

	 .container:hover > div:nth-child(2){
 		transform: translateX(-100px)rotateY(90deg);
 	}
 	 .container:hover > div:nth-child(2)>img:nth-child(1){
 		transform: translateX(-50px) translateY(-50px);
 	}
 	 .container:hover > div:nth-child(2)>img:nth-child(2){
 		transform: translateX(50px) translateY(-50px);
 	}
 	 .container:hover > div:nth-child(2)>img:nth-child(3){
 		transform: translateX(-50px) translateY(50px);
 	}
 	 .container:hover > div:nth-child(2)>img:nth-child(4){
 		transform: translateX(50px) translateY(50px);
 	}

	.container > div:nth-child(3){
		left : 400px;
		transform-origin: left;
		transform: rotateY(-90deg);
	}

	.container:hover > div:nth-child(3)>img:nth-child(1){
 		transform: translateX(-50px) translateY(-50px);
 	}
 	 .container:hover > div:nth-child(3)>img:nth-child(2){
 		transform: translateX(50px) translateY(-50px);
 	}
 	 .container:hover > div:nth-child(3)>img:nth-child(3){
 		transform: translateX(-50px) translateY(50px);
 	}
 	 .container:hover > div:nth-child(3)>img:nth-child(4){
 		transform: translateX(50px) translateY(50px);
 	}

	.container:hover > div:nth-child(3){
 		transform:translateX(100px) rotateY(-90deg);
 	}

	.container > div:nth-child(4){
		top:  -400px;
		transform-origin: bottom;
		transform: rotateX(-90deg);
	}

	.container:hover > div:nth-child(4)>img:nth-child(1){
 		transform: translateX(-50px) translateY(-50px);
 	}
 	 .container:hover > div:nth-child(4)>img:nth-child(2){
 		transform: translateX(50px) translateY(-50px);
 	}
 	 .container:hover > div:nth-child(4)>img:nth-child(3){
 		transform: translateX(-50px) translateY(50px);
 	}
 	 .container:hover > div:nth-child(4)>img:nth-child(4){
 		transform: translateX(50px) translateY(50px);
 	}

	.container:hover > div:nth-child(4){
 		transform: translateY(-100px) rotateX(-90deg);
 	}

	.container > div:nth-child(5){
		bottom : -400px;
		transform-origin: top;
		transform: rotateX(90deg);
	}
	
	.container:hover > div:nth-child(5)>img:nth-child(1){
 		transform: translateX(-50px) translateY(-50px);
 	}
 	 .container:hover > div:nth-child(5)>img:nth-child(2){
 		transform: translateX(50px) translateY(-50px);
 	}
 	 .container:hover > div:nth-child(5)>img:nth-child(3){
 		transform: translateX(-50px) translateY(50px);
 	}
 	 .container:hover > div:nth-child(5)>img:nth-child(4){
 		transform: translateX(50px) translateY(50px);
 	}

	.container:hover > div:nth-child(5){
 		transform: translateY(100px) rotateX(90deg);
 	}
	
	.container:hover > div:last-child{
		 transform: translateZ(500px);
	}

	.container:hover > div:nth-child(6)>img:nth-child(1){
 		transform: translateX(-50px) translateY(-50px);
 	}
 	 .container:hover > div:nth-child(6)>img:nth-child(2){
 		transform: translateX(50px) translateY(-50px);
 	}
 	 .container:hover > div:nth-child(6)>img:nth-child(3){
 		transform: translateX(-50px) translateY(50px);
 	}
 	 .container:hover > div:nth-child(6)>img:nth-child(4){
 		transform: translateX(50px) translateY(50px);
 	}

 	.container:hover > div:first-child{
 		transform: translateZ(-100px);
	}

	.container:hover > div:nth-child(1)>img:nth-child(1){
 		transform: translateX(-50px) translateY(-50px);
 	}
 	 .container:hover > div:nth-child(1)>img:nth-child(2){
 		transform: translateX(50px) translateY(-50px);
 	}
 	 .container:hover > div:nth-child(1)>img:nth-child(3){
 		transform: translateX(-50px) translateY(50px);
 	}
 	 .container:hover > div:nth-child(1)>img:nth-child(4){
 		transform: translateX(50px) translateY(50px);
 	}

	.container > div:nth-child(6){
		transform: translateZ(400px);
	}
	</style>
</head>
<body>
	<div class="container">
	<div>
	<img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.s5alQa1zC-YRd_6hOj1I6AHaGI?w=198&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	<img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.0BPElpPEJvBN9aQ8w73EDAHaEo?w=264&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	<img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.SQ3NWEFNBscPLbU7Jg8GYwHaEK?w=293&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	<img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.Zr5uPHLVSNguKkmIQfos_wAAAA?w=165&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	</div>
		<div>
	<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.drgMM3Em68m3kcDNw-tjWQAAAA?w=165&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	<img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.dRAbgTM8_cqW-iRt9LCEBAHaGH?w=200&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	<img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.b_OQVqDrnGYibO3ts5CLBAAAAA?w=137&h=150&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	<img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.xEv7aAiKIk0onZLcCCRT2wHaFE?w=242&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	</div>
		<div>
	<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.RtG_5vDB1tuDvpQhHbZ7iwHaEo?w=264&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.0V1jtIQ1N-6JODOzUFXjnQHaEo?w=256&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	<img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.HwcUxD_avhYsWdGrqK5kegAAAA?w=155&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	<img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.bxvvwr1QG_I987xHgtGfQgHaEK?w=280&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	</div>
		<div>
	<img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.bxvvwr1QG_I987xHgtGfQgHaEK?w=280&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.0V1jtIQ1N-6JODOzUFXjnQHaEo?w=256&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	<img src="	https://tse3-mm.cn.bing.net/th/id/OIP-C.5m2QUQNO4M3vA7rIId2v-wHaE8?w=246&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.hRU2VTq-nxInfpT-s-6PVQHaE8?w=246&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	</div>
		<div>
	<img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.3CLkNg7Tu9fUO7MIa_R6IwHaEo?w=247&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	<img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.TRhFqkkVRgSoM0SUeDnRWwAAAA?w=257&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	<img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.9SD4AMFTIP4z9hhZLr6k_AAAAA?w=226&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	<img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.00QhpPLlFsVD-nVDv8qBKwAAAA?w=177&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	</div>
		<div>
	<img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.lBPfaEXMhbdNizwzO154jQHaE8?w=250&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.2nWl4S4HgdO1flOWVS8ksAHaEo?w=270&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.5J1TtPKNxy9toKNmID9PDgHaEK?w=317&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	<img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.dAAyBtUSZzzNDnlUIW8A0AHaHa?w=178&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	</div>
	</div>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207

5、效果展示

web旋转相册

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/86739
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号