<!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. JAVA记录-@Controller和RequestMapping注解代码介绍

    1.spring-mvc.xml加入配置 <!-- 自动扫描该包,使SpringMVC认为包下用了@controller注解的类是控制器 --> <context:component ...

  2. 51NOD-1486 大大走格子

    有一个h行w列的棋盘,里面有一些格子是不能走的,现在要求从左上角走到右下角的方案数. Input 单组测试数据. 第一行有三个整数h, w, n(1 ≤ h, w ≤ 10^5, 1 ≤ n ≤ 20 ...

  3. Dijkstra算法：任意两点间的最短路问题 路径还原

    #define _CRT_SECURE_NO_WARNINGS /* 7 10 0 1 5 0 2 2 1 2 4 1 3 2 2 3 6 2 4 10 3 5 1 4 5 3 4 6 5 5 6 9 ...

  4. 008、Docker 组件如何协作（2018-12-25 周二）

    参考https://www.cnblogs.com/CloudMan6/p/6774519.html   以httpd为例,介绍Docker组件间如何协作   root@docker-lab:~# d ...

  5. VSS2005源代码管理

    VSS2005使用详细 http://www.docin.com/p-467455948.html 花了差不多一天的时间把vss配置搞明白了~废话不多说,下面简单的介绍下配置的过程:安装VSS2005 ...

  6. luogu P2123 皇后游戏

    传送门 跟国王游戏一样的分析 考虑相邻的两个大臣,设他们前面的\(\sum a_j\)为\(s\),同时注意到后面人的贡献更大 所以\(i\)在前面时,\(c_j=\max(\max(c_{last} ...

  7. luogu P1357 花园

    传送门 先考虑朴素dp,设\(f_{i,j}\)表示推了\(i\)次,前\(m\)个点的状态为二进制数\(j\)(这里记放C为1),转移的时候枚举下一位放什么,还要考虑是否满足C的个数\(\leq k ...

  8. python初步学习-import和datetime模块

    模块 一个完整大型的python程序是由模块和包的形式组织起来的,可见模块在python中的重要性.模块是一种组织型式,它许多有关联(关系)的代码组织放到单独的独立文件中.简单的说,可以把模块理解为一 ...

  9. how tomcat works

    本文中只是提取了每个模块的关键部分,具体技术细节只能通过看代码来掌握. 1.socket .serversocket tcp通信 2.servlet init destory process(req, ...

  10. git进阶命令

    首先, clone 一个远端仓库,到其目录下: $ Git clone git://example.com/myproject $ cd myproject 然后,看看你本地有什么分支: $ git ...