图片3D旋转
<!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旋转的更多相关文章
- 基于jQuery和CSS3炫酷图片3D旋转幻灯片特效
在线预览 源码下载 iPresenter是一款效果非常炫酷的jQuery和CSS3 3D旋转幻灯片特效插件.你可以使用它来制作产品展示.图片画廊或者各种幻灯片和轮播图特效.这款幻灯片插件的特点有: ...
- css3相册图片3D旋转展示特效
查看效果:http://hovertree.com/texiao/css/14/ 本效果用css3的animation实现动画 定义和用法animation 属性是一个简写属性,用于设置六个动画属性: ...
- CSS3鼠标滑过图片3D旋转动画
在线演示 本地下载
- jquery图片3D旋绕效果 rotate3Di的操作
这是一个图片效果,很简单实用,只需要一个"rotate3Di.js"的插件就行, 关于rotate的用法有如下几种: $(选择器).rotate3Di(30); //把图片3D旋转 ...
- 网页特效：用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 制作3D图片立方体旋转特效
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>CS ...
- CSS3 3D图片立方体旋转
html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...
- JQ 实现轮播图（3D旋转图片轮播效果）
轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...
- css3+jquery制作3d旋转相册
首先来看一下今天的炫酷效果: 首先分析一下这张图片: 1.每张图片都有倒影 2.这11张图片呈圆形均匀排列 3.可旋转,上下移动(当然这是效果做出来以后,图片是分析不出来的) 那下面就开始吧. 一.准 ...
随机推荐
- ajax跨域原理以及jsonp使用
jsonp介绍: JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题. 由于同源策略,一般来说位于 server1.example. ...
- java.net.URL 模拟用户登录网页并维持session【转】
java.net.URL 模拟用户登录网页并维持session 半成品,并非完全有用 import java.io.BufferedReader; import java.io.InputStream ...
- 使用rownum对oracle分页【原】
以Student表为例进行分页 建表及插入 -- 有表结构如下 create table STUDENT ( sno INTEGER, sname ), sage INTEGER ); -- 插入数据 ...
- prompt更改MySQL登陆后的提示符
临时生效 mysql> prompt \u@standby \r:\m:\s > PROMPT set to '\u@standby \r:\m:\s >' root@standby ...
- python多进程那点事儿【multiprocessing库】
前言:项目中有个需求需要对产品的日志处理,按照产品中日志的某些字段,对日志进行再次划分.比如产品的日志中含有字段id,tag=1,现在需要把tag是基数的放到一个文件中,tag是偶数的放入一个文件中. ...
- javascript innerHTML、outerHTML、innerText、outerText的区别(转)
1.功能讲解: innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取位于对象起始和结束标签内 ...
- Python - Scrapy 框架
Scrapy 是采用Python 开发的一个快速可扩展的抓取WEB 站点内容的爬虫框架.Scrapy,Python开发的一个快速,高层次的屏幕抓取和web抓取框架,用于抓取web站点并从页面中提取结构 ...
- Python 入门基础18 --re模块+内存管理
今日内容: 1.垃圾回收机制 2.re模块 一.垃圾回收机制 在计算机中,不能被程序访问到的数,称之为垃圾 1.1 引用计数 引用计数用来记录值的内存地址被记录的次数 每引用一次就对标记 +1 操作 ...
- Mask RCNN 学习笔记
下面会介绍基于ResNet50的Mask RCNN网络,其中会涉及到RPN.FPN.ROIAlign以及分类.回归使用的损失函数等 介绍时所采用的MaskRCNN源码(python版本)来源于GitH ...
- SRS服务器搭建,ffmpeg 本地推流,srs从本地拉流
参考: https://github.com/ossrs/srs/wiki/v2_CN_SampleFFMPEG git clone https://github.com/ossrs/srs cd s ...