<!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记录-redis缓存机制介绍（一）

    1.redis介绍 Redis 简介 Redis 是完全开源免费的,遵守BSD协议,是一个高性能的key-value数据库. Redis 与其他 key - value 缓存产品有以下三个特点: Re ...

  2. Spring触发器触发2次问题【转】

    触发2遍任务对大多数程序而言,都会造成 数据重复 和 资源浪费. 我们在写spring触发器的timetrigger.xml配置文件的时候, 千万不要在Spring的总配置文件applicationC ...

  3. Java编程思想 学习笔记4

    四.控制执行流程 1.true和false 所有条件语句都利用条件表达式的真或假来决定执行路径.注意Java不允许我们将一个数字作为布尔值使用. 2.if-else 3.迭代 while.do-whi ...

  4. Python发邮件的小脚本

    # -*- coding: UTF-8 -*- import smtplib from email.mime.text import MIMEText mailto_list = ['hitwh_Gy ...

  5. php+mysql注入

    SQL简单命令介绍: mysql.exe -u 用户名  -p  密码  -h  ip地址 show databases;查看数据库 select version();php注入下的版本号 use d ...

  6. ABAP知识点笔记

    1,获取光标所在行 READ TABLE TD_ALV_DATA INTO TH_ALV_DATA INDEX RS_SELFIELD-TABINDEX. 2,获取alv可编辑单元格内容 DATA: ...

  7. 第16月第10天 poco target

    1. void TCPServer::start() { poco_assert (_stopped); _stopped = false; _thread.start(*this); } void ...

  8. 【文件】java生成PDF文件

    package test; import java.awt.Color; import java.io.FileOutputStream; import org.junit.Test; import ...

  9. 列式数据库~clickhouse 副本集架构的搭建

    clickhouse 搭建副本集 一 原理:  1 依赖ZK,ZK的基础上,ZK存储数据库元数据 2  使用复制表引擎创建复制表,包括ZK路径和副本名,相同ZK路径的表可以相互复制 3  复制表本身拥 ...

  10. python - 发送邮件(email模块(内置))

    发送邮件 import smtplib from email.mime.text import MIMEText #邮箱件内容 HTML = """ 发送邮件测试2,加密 ...