Web：CSS的特殊样式练习

最新推荐文章于 2024-07-24 10:05:23 发布

南孚程序员

最新推荐文章于 2024-07-24 10:05:23 发布

阅读量97

点赞数

分类专栏： web 文章标签： css 前端 css3

本文链接：https://blog.csdn.net/m0_56423338/article/details/127870495

版权

web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

立体相册：

<!DOCTYPE html>
<html lang="zh">
 <head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>立体相册</title>
 <style>
 body{
 perspective: 600px;  /* 用来控制视距的属性,距离屏幕的像素值 */
 }
 @keyframes myAnimation {
 from{
 transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);  /* 2d转换 */
 }
 to{
 transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
 }
 }
 
 
 .container > img{
 width: 200px;
 height: 200px;
 position: absolute;
 }
 .container{
 /* transform: rotate3d(1,1,1,45deg); */
 position: relative;
 width: 200px;
 height: 200px;
 margin: 300px auto;
 border: 1px solid red;
 transform-style: preserve-3d;
 animation: myAnimation 10s infinite linear;
 }
 .container > img:first-child{
 /* transform: translateZ(200px); */
 }
 
 .container:hover > img:nth-child(2){
 transform: translateX(-100px)rotateY(90deg);
 }
 .container > img:nth-child(2){
 left: -200px;
 transform-origin: right;
 transform: rotateY(90deg);
 }
 
 .container:hover > img:nth-child(3){
 transform:translateX(100px) rotateY(-90deg);
 }
 .container > img:nth-child(3){
 right: -200px;
 transform-origin: left;
 transform: rotateY(-90deg);
 }
 
 .container:hover > img:nth-child(4){
 transform: translateY(-100px) rotateX(-90deg);
 }
 .container > img:nth-child(4){
 top:-200px;
 transform-origin: bottom;
 transform:rotateX(-90deg);
 }
 
 .container:hover > img:nth-child(5){
 transform: translateY(100px) rotateX(90deg);
 }
 .container > img:nth-child(5){
 bottom:-200px;
 transform-origin: top;
 transform:rotateX(90deg);
 }
 
 .container:hover > img:last-child{
 transform: translateZ(300px);
 }
 .container:hover > img:first-child{
 transform: translateZ(-100px);
 }
 .container > img:last-child{
 transform: translateZ(200px);
 }
 </style>
 </head>
 <body>
 <div class="container">
 <img src="C:\Users\Howe\Desktop/1.jpg" alt="">
 <img src="C:\Users\Howe\Desktop/2.jpg" alt="">
 <img src="C:\Users\Howe\Desktop/3.jpg" alt="">
 <img src="C:\Users\Howe\Desktop/4.jpg" alt="">
 <img src="C:\Users\Howe\Desktop/5.jpg" alt="">
 <img src="C:\Users\Howe\Desktop/6.jpg" alt="">
 </div>
 </body>
</html>