<!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. idea工具常见问题汇总

    1.隐藏idea创建项目自带的文件及文件夹比如.iml和.idea文件夹 Settings→Editor→File Types 在下方的忽略文件和目录(Ignore files and folders ...

  2. Ruby 集合数组常用遍历方法

    迭代器简介 先简单介绍一下迭代器. 1.一个Ruby迭代器就是一个简单的能接收代码块的方法(比如each这个方法就是一个迭代器).特征:如果一个方法里包含了yield调用,那这个方法肯定是迭代器: 2 ...

  3. POJ - 1905 Expanding Rods（二分+计算几何）

    http://poj.org/problem?id=1905 题意 一根两端固定在两面墙上的杆,受热后变弯曲.求前后两个状态的杆的中点位置的距离 分析 很明显需要推推公式. 由②的限制条件来二分角度, ...

  4. VMware WorkStation9.0 安装centos-6.4

    1,设置虚拟机内存为8G时,启动报内存不足错误: Not enough physical memory is available to power on this virtual machine 解决 ...

  5. 20. Spring Boot 默认、自定义数据源 、配置多个数据源 jdbcTemplate操作DB

    Spring-Boot-2.0.0-M1版本将默认的数据库连接池从tomcat jdbc pool改为了hikari,这里主要研究下hikari的默认配置 0.  创建Spring Boot项目,选中 ...

  6. cpp与其他语言相比较

    new  相当于 malloc ,delete 相当于  free ,用法一样 c++ 有 namespace,可以避免类名污染  namespace xx{} c++ 有类 这个与 c#.as3比较 ...

  7. 2016年1月7日 隐藏NavigationBar时的一个坑

    http://www.jianshu.com/p/efb960fed457 - (void)viewWillAppear:(BOOL)animated { [super viewWillAppear: ...

  8. Mac下压力测试工具siege

    安装: brew install siege 用法: siege -c 并发数 -t 运行测试时间 URL 如: siege -c 1000 -t 5S URL 这里要注意的是-t后面的时间要带单位, ...

  9. 在window系统下安装Sass

    1.Ruby下载 因为Sass依赖于Ruby环境,所以应先在window系统下安装Ruby,Ruby安装包下载链接:http://rubyinstaller.org/downloads/ 2.Ruby ...

  10. Flask最强攻略 - 跟DragonFire学Flask - 第六篇 Flask 中内置的 Session

    Flask中的Session非常的奇怪,他会将你的SessionID存放在客户端的Cookie中,使用起来也非常的奇怪 1. Flask 中 session 是需要 secret_key 的 from ...