图片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.可旋转,上下移动(当然这是效果做出来以后,图片是分析不出来的) 那下面就开始吧. 一.准 ...
随机推荐
- matplotlib笔记——legend用法
rates = [0.01, 0.001, 0.0001] models = {} costs = np.array([[0.7, 0.9, 0.4, 0.6, 0.4, 0.3, 0.2, 0.1] ...
- vue项目首次加载过慢
vue项目优化 浅谈 Vue 项目优化 关于vue在app首次加载缓慢的解决办法 nginx开启缓存 在http部分加入 #要想开启nginx的缓存功能,需要添加此处的两行内容! #设置Web缓存区名 ...
- oozie JAVA Client 编程提交作业
1,eclipse环境搭建 在eclipse中新建一个JAVA工程,导入必要的依赖包,目前用到的有: 其次编写JAVA 程序提交Oozie作业,这里可参考:oozie官方参考文档 在运行提交程序前,首 ...
- tomcat server.xml
基于对server.xml的学习,结合源码,可以进一步理解tomcat的架构设计 1. 2. 3. 4 .valve链 参考: http://www.importnew.com/17124.html ...
- 【Udacity并行计算课程笔记】- Lesson 2 The GPU Hardware and Parallel Communication Patterns
本小节笔记大纲: 1.Communication patterns gather,scatter,stencil,transpose 2.GPU hardware & Programming ...
- Java 线性表、栈、队列和优先队列
1.集合 2.迭代器 例子: 3.线性表 List接口继承自Collection接口,有两个具体的类ArrayList或者LinkedList来创建一个线性表 数组线性表ArrayList Linke ...
- python 读取文件时报错UnicodeDecodeError: 'gbk' codec can't decode byte 0x80 in position 205: illegal multib
python 读取文件时报错UnicodeDecodeError: 'gbk' codec can't decode byte 0x80 in position 205: illegal multib ...
- python顺序执行多个py文件
python顺序执行多个py文件 假如我要执行code目录下的python程序,假设该目录下有1.py,2.py,3.py,4.py四个文件,但是我想执行1.py,2.py,4.py,则可在该目录下创 ...
- 【vim】保存文件没有权限 :w !sudo tee %
每当你打开一个你没有写入权限的文件(比如系统配置文件)并做了一些修改,Vim 无法通过普通的 ":w" 命令来保存. 你不需要重新以 root 方式打开文件再进行修改,只需要运行: ...
- COM口总是有惊叹号怎么办
现在用win8或者win8.1的人越来越多,搞开发的COM口是离不开的我们用转串口芯片时总会出现COM口有惊叹号的情况,这样我们的设备是无法正常使用的,那要怎么办呢? 方法: 想改成上图这样没有惊叹号 ...