用html制作3d旋转正方形相册

最新推荐文章于 2024-06-17 03:12:17 发布

Mr_jianghanlin

最新推荐文章于 2024-06-17 03:12:17 发布

阅读量5k

点赞数 4

分类专栏：前端文章标签： css3 html html5

本文链接：https://blog.csdn.net/Mr_jianghanlin/article/details/105264692

版权

前端专栏收录该内容

23 篇文章 2 订阅

订阅专栏

用html制作3d旋转正方体相册

首先给大家看看效果图：动态效果，就接了几张图片给大家看

做这个实验最主要的就是用到了HTML5的动画的 animation 属性和@keyframes规则

说先看看keyframers的规则语法定义：

@ keyframes animationname{
		kkeyframes-selector{}
		}

animation的属性书写语法如下：

animation ：name duration timing-function delay iteration-count direction fillmode paly-state;

还用到了一些CSS3变形效果3D的转换，在这里就不一一说了，上一个博客已经写过了；主要提一下要呈现 3D的效果必须要用到perspective属性的透视效果就是用于是实现视觉上的3D效果;

话不多说看代码html:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3d</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            background-color: wheat;

        }
        .one{width: 300px;
            height: 300px;
            text-align: center;
            margin: 150px auto;
            position: relative;
            perspective: 3000px;
            transform-style: preserve-3d;
            opacity: 1;
            transform:rotateX(-30deg) rotateY(30deg);
            animation: run 10s linear 0s infinite;

        }
        div{
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            opacity: 0.9;

        }
        @keyframes  run{
            0%{

                transform:rotate(0deg)  rotateX(0deg);
            }

            100%{
                transform:rotate(360deg) rotateX(360deg);
                      }
        }
        .one :nth-child(1){
    /*        background-color: hotpink;*/

            transform:translateZ(150px);


        }

        .one :nth-child(2){
          /*  background-color: darkgreen;*/
            transform:rotateY(90deg) translateZ(150px);

        }
        .one :nth-child(3){
       /*     background-color:green ;*/
            transform:rotateY(90deg) translateZ(-150px);

        }
        .one :nth-child(4){
          /*  background-color: darkblue;*/
            transform: rotateX(90deg) translateZ(150px);

        }
        .one :nth-child(5){
          /*  background-color: yellow;*/
            transform: rotateX(90deg) translateZ(-150px);
        }
        .one :nth-child(6){
              /* background-color: darkred;*/
            transform:translateZ(-150px);

           }
        img{
            width: 100%;
            height: 100%;

        }

    </style>
</head>
<body>
    <div class="one">
       <div><img src="zhangyixing2.jpg" alt=""></div>
        <div><img src="zhangyixing3.jpg" alt=""></div>
        <div><img src="zhangyixing4.jpg" alt=""></div>
        <div><img src="zhangyixing5.jpg" alt=""></div>
        <div><img src="zhangyixing6.jpg" alt=""></div>
        <div><img src="zhangyixing1.gif" alt=""></div>
    </div>
</body>
</html>

在上述实验中用到了几张图片：
在这里插入图片描述

以上就可以做出和上图一样的动画效果

Mr_jianghanlin

关注

4
点赞
踩
36

收藏

觉得还不错? 一键收藏
2
评论
用html制作3d旋转正方形相册

用html制作3d旋转正方体相册首先给大家看看效果图：动态效果，就接了几张图片给大家看做这个实验最主要的就是用到了HTML5的动画的 animation 属性和@keyframes规则说先看看keyframers的规则语法定义：@ keyframes animationname{ kkeyframes-selector{} }animation的属性书写语法如下：anim...
复制链接

扫一扫