照片墙（3D立体几何）

最新推荐文章于 2024-05-13 21:58:25 发布

哎呦喂@

最新推荐文章于 2024-05-13 21:58:25 发布

阅读量286

点赞数

文章标签： html5 css3 javascript

本文链接：https://blog.csdn.net/weixin_52321349/article/details/117700229

版权

该博客展示了如何使用HTML5、CSS3和JavaScript创建一个3D立体几何效果的照片墙，其中每个图片元素尺寸为200px * 200px。通过这段代码，读者可以了解到如何结合前端技术实现动态视觉效果。

摘要由CSDN通过智能技术生成

效果展示：
在这里插入图片描述
全部代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
@-webkit-keyframes spin {
     
 0% {
     
 -webkit-transform:rotateY(0deg);
 transform:rotateY(0deg)
}
 100% {
     
 -webkit-transform:rotateY(360deg);
 transform:rotateY(360deg)
}
}
 @-moz-keyframes spin {
     
 0% {
     
 -moz-transform:rotateY(0deg);
 transform:rotateY(0deg)
}
 100% {
     
 -moz-transform:rotateY(360deg);
 transform:rotateY(360deg)
}
}
 @-ms-keyframes spin {
     
 0% {
     
 -ms-transform:rotateY(0deg);
 transform:rotateY(0deg)
}
 100% {
     
 -ms-transform:rotateY(360deg);
 transform:rotateY(360deg)
}
}
 @-o-keyframes spin {
     
 0% {
     
 -o-transform:rotateY(0deg);
 transform:rotateY(0deg)
}
 100% {
     
 -o-transform:rotateY(360deg);
 transform:rotateY(360deg)
}
}
 @keyframes spin {
     
 0% {
     
transform:rotateY(0deg)
}
 100% {
     
transform:rotateY(360deg)
}
}
body {
     
	background: #000;
	color: white;
}
table {
     
	text-align: center;
}
.stage {
     
    width: 300px;
    height: 300px;
    margin: 15px auto;
    position: relative;
    -webkit-perspective: 300px;
    -moz-perspective: 300px;
    -ms-perspective: 300px;
    -o-perspective: 300px;
    perspective: 300px;
}
.container {
     
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -100px;
    position: absolute;
    -webkit-transform: translateZ(-100px);
    -moz-transform: translateZ(-100px);
    -ms-transform: translateZ(-100px);
    -o-transform: translateZ(-100px);
    transform: translateZ(-100px);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.container:hover {
     
    -moz-animation

最低0.47元/天解锁文章

哎呦喂@

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
照片墙（3D立体几何）

效果展示：全部代码：<!doctype html><html><head><meta charset="utf-8"><style type="text/css">@-webkit-keyframes spin { 0% { -webkit-transform:rotateY(0deg); transform:rotateY(0deg)} 100% { -webkit-transform:rotateY(360deg);
复制链接

扫一扫