css过渡、动画3D环绕相册

最新推荐文章于 2024-04-26 09:17:20 发布

三生石上缘

最新推荐文章于 2024-04-26 09:17:20 发布

阅读量1.1k

点赞数 1

分类专栏： HTML+CSS 文章标签： css动画 html 过渡属性相册环绕动画

本文链接：https://blog.csdn.net/qq_43239707/article/details/98660695

版权

HTML+CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

以下是八面环绕相册

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </body>
</html>


* {
  padding: 0;
  margin: 0;
}
body {
  perspective: 800px;
}
ul {
  list-style: none;
  position: relative;
  margin: 150px auto;
  width: 200px;
  transform-style: preserve-3d;
  transform: rotateY(30deg) rotateX(-20deg);
  animation: boxRotate 5s linear infinite ;
}
@keyframes boxRotate {
  0% {
    transform: perspective(800px) rotateY(30deg) rotateX(-20deg) rotateY(0deg);
  }
  100% {
    transform: perspective(800px) rotateY(30deg) rotateX(-20deg) rotateY(360deg);
  }
}
ul li {
  width: 150px;
  height: 150px;
  position: absolute;
  text-align: center;
  line-height: 200px;
  font-size: 40px;
  border: 1px solid black;
  background-size: 150px 150px;
}
ul :first-child {
  transform: translateZ(200px);
  background-image: url(../img/baby.png);
}
ul :nth-child(2) {
  transform: rotateY(45deg) translateZ(200px);
  background-image: url(../img/chenhe.png);
}
ul :nth-child(3) {
  transform: rotateY(90deg) translateZ(200px);
  background-image: url(../img/dilireba.png);
}
ul :nth-child(4) {
  transform: rotateY(135deg) translateZ(200px);
  background-image: url(../img/u1.jpg);
}
ul :nth-child(5) {
  transform: rotateY(180deg) translateZ(200px);
  background-image: url(../img/u2.jpg);
}
ul :nth-child(6) {
  transform: rotateY(225deg) translateZ(200px);
  background-image: url(../img/u3.jpg);
}
ul :nth-child(7) {
  transform: rotateY(270deg) translateZ(200px);
  background-image: url(../img/u4.jpg);
}
ul :last-child {
  transform: rotateY(-45deg) translateZ(200px);
  background-image: url(../img/u6.jpg);
}

立体相册中间嵌套小立体相册并整体旋转

<body>
    <div class="bigbox">
        <div class="smbox mright">right</div>
        <div class="smbox mleft">left</div>
        <div class="smbox mtop">top</div>
        <div class="smbox mbottom">bottom</div>
        <div class="smbox mfont">font</div>
        <div class="smbox mback">back</div>


        <div class="right">right</div>
        <div class="left">left</div>
        <div class="top">top</div>
        <div class="bottom">bottom</div>
        <div class="font">font</div>
        <div class="back">back</div>
    </div>
</body>

/* 立体相册样式 */
.bigbox {
    width: 300px;
    height: 300px;
    margin: 150px auto;
    /* background-color: gray; */
    position: relative;
    
    /* opacity: 0.8; */
    /* 让子元素具有3d效果 */
    transform-style:preserve-3d;
    /* 景深透视 */
    transform:perspective(800px) rotateX(45deg) rotateY(30deg);
    animation: boxRotate 5s linear infinite ;
    
}
.smbox{
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
@keyframes boxRotate{
    0%{
        transform:perspective(800px) rotateX(0deg) rotateY(0deg);
    }
    100%{
        transform:perspective(800px) rotateX(360deg) rotateY(360deg);
    }
}


.bigbox div {
    
    background-color: lightcoral;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.8;
    background-size: 100% 100%;
    box-shadow: 0 0 10px skyblue;
}
.right{
    width: 300px;
    height: 300px;
    transform: translateX(150px) rotateY(90deg);
    background-image: url(img/xu1.jpg);
}
.mright{
    width: 100px;
    height: 100px;
    transform: translateX(50px) rotateY(90deg);
    background-image: url(img/xu1.jpg);
}
.bigbox:hover .right{
    transform: translateX(150px) rotateY(90deg) translateZ(100px);

}

.left{
    width: 300px;
    height: 300px;
    transform: translateX(-150px) rotateY(-90deg);
    background-image: url(img/xu2.jpg);
}
.mleft{
    width: 100px;
    height: 100px;
    transform: translateX(-50px) rotateY(-90deg);
    background-image: url(img/xu2.jpg);
}
.bigbox:hover .left{
    transform: translateX(-150px) rotateY(-90deg) translateZ(100px);

}

.font{
    width: 300px;
    height: 300px;
    transform: translateZ(150px);
    background-image: url(img/xu3.jpg);
}
.mfont{
    width: 100px;
    height: 100px;
    transform: translateZ(50px);
    background-image: url(img/xu3.jpg);
}
.bigbox:hover .font{
    transform: translateZ(150px) translateZ(100px);

}

.back{
    width: 300px;
    height: 300px;
    transform: translateZ(-150px);
    background-image: url(img/xu4.jpg);
}
.mback{
    width: 100px;
    height: 100px;
    transform: translateZ(-50px);
    background-image: url(img/xu4.jpg);
}
.bigbox:hover .back{
    transform: translateZ(-150px) translateZ(-100px);

}

.top{
    width: 300px;
    height: 300px;
    transform: translateY(-150px) rotateX(90deg);
    background-image: url(img/xu5.jpg);
}
.mtop{
    width: 100px;
    height: 100px;
    transform: translateY(-50px) rotateX(90deg);
    background-image: url(img/xu5.jpg);
}
.bigbox:hover .top{
    transform: translateY(-150px) rotateX(90deg) translateZ(100px);

}

.bottom{
    width: 300px;
    height: 300px;
    transform: translateY(150px) rotateX(-90deg);
    background-image: url(img/xu6.jpg);
}
.mbottom{
    width: 100px;
    height: 100px;
    transform: translateY(50px) rotateX(-90deg);
    background-image: url(img/xu6.jpg);
}
.bigbox:hover .bottom{
    transform: translateY(150px) rotateX(-90deg) translateZ(100px);
}

三生石上缘

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
css过渡、动画3D环绕相册

以下是八面环绕相册<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <...
复制链接

扫一扫