欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

图片立体旋转特效

程序员文章站 2022-03-22 10:20:00
综合前面学习的3d旋转制作技巧写的第一个简单的图片旋转特效,以下是全部代码 ...

综合前面学习的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>

本文地址:https://blog.csdn.net/qq_45626944/article/details/109240533

相关标签: 笔记 css