css 3d旋转相册

最新推荐文章于 2022-09-08 21:07:34 发布

~千帆

最新推荐文章于 2022-09-08 21:07:34 发布

阅读量542

点赞数 1

分类专栏： css 文章标签： css html

原文链接：https://blog.csdn.net/BeautifulApple/article/details/89677175?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522161657073216780264042242%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=161657073216780264042242&biz_id=0&utm_

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css 3d旋转相册#特效

在这里插入图片描述

相信大家经常从网页上看到这种特效小视频，看起来很炫酷，其实实现起来并不困难。~附实现方法及源码

1. 第一步
创建一个空text文本文件，写入以下代码后保存

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>css-3d旋转</title>
  <link rel="stylesheet" href="css/index.css" />
 </head>
 <body>
  <!--/*外层最大容器*/-->
  <div class="wrap">
 <!-- /*包裹所有元素的容器*/-->
  <div class="cube">
   <!--前面图片 -->
   <div class="out_front">
    <img src="img/1.jpg"  class="pic"/>
   </div>
   <!--后面图片 -->
   <div class="out_back">
    <img src="img/2.jpg"  class="pic"/>
   </div>
   <!--左图片 -->
   <div class="out_left">
    <img src="img/3.jpg"  class="pic"/>
   </div>
   <div class="out_right">
    <img src="img/4.jpg"  class="pic"/>
   </div>
   <div class="out_top">
    <img src="img/5.jpg"  class="pic"/>
   </div>
   <div class="out_bottom">
    <img src="img/6.jpg"  class="pic"/>
   </div>
   <!--小正方体 --> 
   <span class="in_front">
    <img src="img/7.jpg" class="in_pic" />
   </span>
   <span class="in_back">
        <img src="img/8.jpg" class="in_pic" />
   </span>
   <span class="in_left">
    <img src="img/9.jpg" class="in_pic" />
   </span>
   <span class="in_right">
    <img src="img/10.jpg" class="in_pic" />
   </span>
   <span class="in_top">
    <img src="img/11.jpg" class="in_pic" />
   </span>
   <span class="in_bottom">
    <img src="img/12.jpg" class="in_pic" />
   </span>
  </div>
  </div>
 </body>
</html>

保存完成，将其文件名及其后缀改为index.html。

2.第二步
新建空文件夹，改名为css。进入内部新建空text文本文件，写入以下代码后保存

html{
 background: #000;
    height: 100%; 
}
/*最外层容器样式*/
.wrap{
 position: relative;
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 width: 200px;
 height: 200px;
 margin: auto;
 /*改变左右上下,图片方块移动*/
 
}
/*包裹所有容器样式*/
.cube{
 width: 200px;
 height: 200px;
 margin: 0 auto;
 transform-style: preserve-3d;
 transform: rotateX(-30deg) rotateY(-80deg);
 -webkit-animation: rotate 20s infinite;
 /*匀速*/
 animation-timing-function: linear;
}
@-webkit-keyframes rotate{
 from{transform: rotateX(0deg) rotateY(0deg);}
 to{transform: rotateX(360deg) rotateY(360deg);}
}
.cube div{
 position: absolute;
 width: 200px;
 height: 200px;
 opacity: 0.8;
 transition: all .4s;
}
/*定义所有图片样式*/
.pic{
 width: 200px;
 height: 200px;
}
.cube .out_front{

保存完成，将其文件名及其后缀改为index.css。退出当前文件夹

3. 第三步
新建空文件夹，改名为img。进入内部创建12张图片，图片像素大小约580px*550px，命名规则为1.jpg/2.jpg/3.jpg…12.jpg

4. 第四步
退出当前文件夹，执行index.html文件。

~千帆

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
css 3d旋转相册

css 3d旋转相册#特效相信大家经常从网页上看到这种特效小视频，看起来很炫酷，其实实现起来并不困难。~附实现方法及源码1. 第一步创建一个空text文本文件，写入以下代码后保存<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>css-3d旋转</title> <link rel="stylesheet" href="css/inde
复制链接

扫一扫