<!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. python---web框架本质（2）

    目录 controllers //存放控制方法 models //存放模型方法 views //存放视图模板 index.html new.html show.html index.py //用户访问 ...

  2. Spark记录-SparkSql官方文档中文翻译（部分转载）

    1 概述(Overview) Spark SQL是Spark的一个组件,用于结构化数据的计算.Spark SQL提供了一个称为DataFrames的编程抽象,DataFrames可以充当分布式SQL查 ...

  3. 运用Zabbix实现内网服务器状态及局域网状况监控（3） —— Zabbix服务端安装

    1. Zabbix服务端安装,基于LNMP PHP5.5+Nginx1.9安装配置:http://www.cnblogs.com/vurtne-lu/p/7707536.html MySQL5.5编译 ...

  4. POJ - 1019 Number Sequence （思维）

    https://vjudge.net/problem/POJ-1019 题意 给一串1 12 123 1234 12345 123456 1234567 12345678 123456789 1234 ...

  5. ASP.NET MVC深入浅出（被替换）

    一. 谈情怀-ASP.NET体系 从事.Net开发以来,最先接触的Web开发框架是Asp.Net WebForm,该框架高度封装,为了隐藏Http的无状态模式,ViewState功不可没,通过的控件的 ...

  6. caffe 中 python 数据层

    caffe中大多数层用C++写成. 但是对于自己数据的输入要写对应的输入层,比如你要去图像中的一部分,不能用LMDB,或者你的label 需要特殊的标记. 这时候就需要用python 写一个输入层. ...

  7. Linux - DDOS检测

    netstat  netstat -na #显示所有连接到服务器的活跃的网络连接 netstat -an | grep : | sort # 只显示连接到80段口的活跃的网络连接,80是http端口, ...

  8. php 设置中文 cookie, js获取

    参考链接:http://www.nowamagic.net/librarys/veda/detail/1271 http://www.ruanyifeng.com/blog/2008/06/base6 ...

  9. MySQL或MariaDB忘记root密码

    当我们忘记数据库密码时,我们可以通过如下来修改! 编辑配置文件(提前最好进行备份) 然后重启服务 systemctl restart mariadb 或者 systemctl restart mysq ...

  10. Linux 进程中 Stop, Park, Freeze【转】

    转自:https://blog.csdn.net/yiyeguzhou100/article/details/53134743 http://kernel.meizu.com/linux-proces ...