HTML+CSS实现3D旋转相册

2023-12-28 16:59| 来源: 网络整理| 查看: 265

介绍

在前几篇博客中介绍了transform的属性，那么再经过几天的学习之后，现在对transform的属性有了更多了理解，同时也通过自己的想法，完成了下面的作品：实现一个3D的旋转相册在这里插入图片描述

代码

废话不多说，直接上代码吧~

3D旋转相册 | ITWCN * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; display: flex; justify-content: center; align-items: center; background: radial-gradient(#ccc, rgb(156, 211, 211)); } .container { width: 300px; height: 300px; position: relative; /* 样式 */ transform-style: preserve-3d; /* transform: rotateX(-20deg) rotateY(-20deg); */ animation: rotate 10s linear alternate infinite; } .container .item { position: absolute; width: 100%; height: 100%; opacity: 0.7s; box-shadow: 0 0 10px #000000; } img { width: 300px; height: 300px; } /* img:hover { width: 400px; height: 400px; } */ .container .front { transform: translateZ(150px); } .container .back { transform: rotateY(180deg) translateZ(150px); } .container .left { transform: rotateY(-90deg) translateZ(150px); } .container .right { transform: rotateY(90deg) translateZ(150px); } .container .top { transform: rotateX(90deg) translateZ(150px); } .container .bottom { transform: rotateX(-90deg) translateZ(150px); } @keyframes rotate { 0%, 5% { transform: rotateY(90deg); } 20%, 25% { transform: rotateY(180deg); } 40%, 45% { transform: rotateY(270deg); } 60%, 65% { transform: rotateX(-90deg); } 80%, 85% { transform: rotateX(0); } 95%, 100% { transform: rotateX(90deg); } }

【本文地址】

公司简介

联系我们