图片立体旋转特效

最新推荐文章于 2020-12-05 19:43:33 发布

就想糊糊涂涂

最新推荐文章于 2020-12-05 19:43:33 发布

阅读量788

点赞数

分类专栏：前端基础

本文链接：https://blog.csdn.net/qq_45626944/article/details/109240533

版权

css

前端基础专栏收录该内容

25 篇文章 0 订阅

订阅专栏

综合前面学习的3d旋转制作技巧写的第一个简单的图片旋转特效，源码

<html>
    <head>

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,inital-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=7">
        <title>小朋友的日常</title>
        <style>
            body{
                background-color: black;
            }
            .wrap{
                width:230px;    /*div区域宽度 是 250 像素*/
                height:300px;      
                margin: 200px auto;  /*可以让div居中*/
                position: relative;  /*相对定位*/
                transform-style: preserve-3d; /*3d样式*/
                transform: rotateX(-12deg);
                animation:xpy 20s infinite;  /*注意名称要与下面的@keyframes中的xpy一致，infinite表示一直旋转*/
                animation-timing-function: linear;/*匀速*/
            }
            .p{          /*定义p的位置*/
                position: absolute;   /*绝对定位的位置，指下面时绝对位置*/
                left: 0;
                right: 0;
                width: 100%;
                height:100%;
            }
            .p:nth-child(1){
                transform:rotateY(0deg) translateZ(275px);/*Y轴上旋转零度，Z轴上移动275*/
            }
            .p:nth-child(2){
                transform:rotateY(45deg) translateZ(275px);
            }
            .p:nth-child(3){
                transform:rotateY(90deg) translateZ(275px);
            }
            .p:nth-child(4){
                transform:rotateY(135deg) translateZ(275px);
            }
            .p:nth-child(5){
                transform:rotateY(180deg) translateZ(275px);
            }
            .p:nth-child(6){
                transform:rotateY(225deg) translateZ(275px);
            }
            .p:nth-child(7){
                transform:rotateY(270deg) translateZ(275px);
            }
            .p:nth-child(8){
                transform:rotateY(315deg) translateZ(275px);
            }
            @keyframes xpy{  /*定义一个动画效果为：xpy,使 div 元素匀速向下移动*/
                from{
                    transform: rotateX(-12deg) rotateY(0deg);
                }
                to{
                    transform: rotateX(-12deg) rotateY(360deg);
                }
            }
        </style>
    </head>
    <body>
        <div class="wrap">

            <div class="p">
                <img src="E:\photos\1.jpg" width="230" height="300">
            </div>
            <div class="p">
                <img src="E:\photos\2.jpg" width="230" height="300">
            </div>
            <div class="p">
                <img src="E:\photos\3.jpg" width="230" height="300">
            </div>
            <div class="p">
                <img src="E:\photos\4.jpg" width="230" height="300">
            </div>
            <div class="p">
                <img src="E:\photos\5.jpg" width="230" height="300">
            </div>
            <div class="p">
                <img src="E:\photos\6.jpg" width="230" height="300">
            </div>
            <div class="p">
                <img src="E:\photos\xmc2.jpg" width="230" height="300">
            </div>
            <div class="p">
                <img src="E:\photos\xmc3.jpg" width="230" height="300">
            </div>
        </div>
    </body>
</html>

就想糊糊涂涂

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片立体旋转特效

综合前面学习的3d旋转制作技巧写的第一个简单的图片旋转特效，以下是全部代码<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,inital-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=7">
复制链接

扫一扫

专栏目录