<!DOCTYPE html5>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>3D旋转幻灯片</title>

</head>

<style type="text/css">

    body{

        perspective:500px;

        perspective-origin:50% 30%;/*坐标基点(X,Y)*/

        background: #ff9;

        overflow: hidden;/*隐藏溢出*/

    }

    #zhuan{

        position: relative;

        width: 900px;

        height: 350px;

        margin: 150px auto;

        transform-style:preserve-3d;

        animation:xuanzhuan 9s steps(35) infinite;

    }

    @keyframes xuanzhuan{

            to{

                transform:rotateY(1080deg);

            }

        }

    #zhuan div{

        position: absolute;

        width: 100px;

        height: 111px;

        left: calc(50% - 50px);

        bottom: 50%;

        transform-origin:50% 0;

        background-repeat: no-repeat;

        transform-style:preserve-3d;

        background-size: 1200px 111px;

    }

    #zhuan div:after{

        content: "";

        position: absolute;

        left: 0;

        top: 0;

        width: 100%;

        height: 100%;

        transform-origin:50% 100%;

        transform:rotateX(90deg) translateZ(-3px) translateY(-5px);

        box-shadow: inset 0px -100px 100px -100px #000;

    }

    #zhuan div:nth-child(0){

        transform:rotateY(0deg) translateZ(-300px);

        background-image: url(1.jpg);

    }

    #zhuan div:nth-child(1){

        transform:rotateY(30deg) translateZ(-300px);

        background-image: url(1.jpg);

    }

    #zhuan div:nth-child(2){

        transform:rotateY(60deg) translateZ(-300px);

        background-image: url(1.jpg);

    }

    #zhuan div:nth-child(3){

        transform:rotateY(90deg) translateZ(-300px);

        background-image: url(1.jpg);

    }

    #zhuan div:nth-child(4){

        transform:rotateY(120deg) translateZ(-300px);

        background-image: url(1.jpg);

    }

    #zhuan div:nth-child(5){

        transform:rotateY(150deg) translateZ(-300px);

        background-image: url(1.jpg);

    }

    #zhuan div:nth-child(6){

        transform:rotateY(180deg) translateZ(-300px);

        background-image: url(1.jpg);

    }

    #zhuan div:nth-child(7){

        transform:rotateY(210deg) translateZ(-300px);

        background-image: url(1.jpg);

    }

    #zhuan div:nth-child(8){

        transform:rotateY(240deg) translateZ(-300px);

        background-image: url(1.jpg);

    }

    #zhuan div:nth-child(9){

        transform:rotateY(270deg) translateZ(-300px);

        background-image: url(1.jpg);

    }

    #zhuan div:nth-child(10){

        transform:rotateY(300deg) translateZ(-300px);

        background-image: url(1.jpg);

    }

    #zhuan div:nth-child(11){

        transform:rotateY(330deg) translateZ(-300px);

        background-image: url(1.jpg);

    }

    #zhuan div:nth-child(12){

        transform:rotateY(360deg) translateZ(-300px);

        background-image: url(1.jpg);

    }

</style>

<body>

    <div id="zhuan">

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

    </div>

</body>

</html>

图片3D旋转的更多相关文章

  1. 基于jQuery和CSS3炫酷图片3D旋转幻灯片特效

    在线预览   源码下载 iPresenter是一款效果非常炫酷的jQuery和CSS3 3D旋转幻灯片特效插件.你可以使用它来制作产品展示.图片画廊或者各种幻灯片和轮播图特效.这款幻灯片插件的特点有: ...

  2. css3相册图片3D旋转展示特效

    查看效果:http://hovertree.com/texiao/css/14/ 本效果用css3的animation实现动画 定义和用法animation 属性是一个简写属性,用于设置六个动画属性: ...

  3. CSS3鼠标滑过图片3D旋转动画

    在线演示       本地下载

  4. jquery图片3D旋绕效果 rotate3Di的操作

    这是一个图片效果,很简单实用,只需要一个"rotate3Di.js"的插件就行, 关于rotate的用法有如下几种: $(选择器).rotate3Di(30); //把图片3D旋转 ...

  5. 网页特效：用CSS3制作3D图片立方体旋转特效

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. 制作3D图片立方体旋转特效

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title>CS ...

  7. CSS3 3D图片立方体旋转

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  8. JQ 实现轮播图（3D旋转图片轮播效果）

    轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...

  9. css3+jquery制作3d旋转相册

    首先来看一下今天的炫酷效果: 首先分析一下这张图片: 1.每张图片都有倒影 2.这11张图片呈圆形均匀排列 3.可旋转,上下移动(当然这是效果做出来以后,图片是分析不出来的) 那下面就开始吧. 一.准 ...

随机推荐

  1. Windows环境墙内搭建Go语言集成开发环境

    1 安装go环境 太简单略 2 安装vs code 找到微软的官方网站,下载Visual Studio Code,官网地址https://code.visualstudio.com/ 安装完成后进入V ...

  2. Linux 命令详解（六）Linux 守护进程的启动方法

    Linux 守护进程的启动方法 http://www.ruanyifeng.com/blog/2016/02/linux-daemon.html

  3. 用贪心算法近似求解 Loading Balance 问题(作业调度的负载均衡)

    一,Loading Balance 问题描述:有 m 台相同的机器及 n 个作业,其中 m={M(1),M(2),……M(m)}.n = {J(1),J(2),……J(n)}.每个作业都有一个处理时间 ...

  4. VS设置以管理员方式运行

    一直以为VS不能直接以管理员方式运行,原来它是在高级里的.

  5. Docker入门03——Container

    1 启动容器 1.1 新建并启动 1.2 启动已终止容器 2 后台运行 3 终止 4 进入容器 5 导入和导出 5.1 导出 5.2 导入 6 删除 1 启动容器 1.1 新建并启动 docker r ...

  6. luogu P1600 天天爱跑步

    传送门 1A此题暴祭 (下面记点\(x\)深度为\(de_x\),某个时间点记为\(w_x\)) 首先,每条路径是可以拆成往上和往下两条路径的 对于往上的路径,假设有个人往上跑,\(w_y\)在点\( ...

  7. luogu P2051 [AHOI2009]中国象棋

    统计方案,果断 dp 注意到合法方案即为每一行,每一列的棋子数不超过2 设\(f_{i,j,k}\)表示放到第\(i\)行,有\(j\)列可以放2个,有\(k\)列可以放1个的方案 然后就随便讨论一下 ...

  8. for XX in XX结构

    这是一个循环!! in 后面可跟range,enumerate,序列等 for i in [(1,2),(2,3),("gege",5)]: print (i) 执行结果: (1, ...

  9. django学习~forms

    一 简介 今天咱们来聊聊 django强大的表单功能二 Froms作用   1 自动生成HTML表单元素   2 检查表单数据的合法性   3 如果验证错误,重新显示表单(数据不会重置)   4 数据 ...

  10. 卷积神经网络(CNN)学习笔记1：基础入门

    卷积神经网络(CNN)学习笔记1:基础入门 Posted on 2016-03-01   |   In Machine Learning  |   9 Comments  |   14935  Vie ...