计算机3d相册代码,CSS3实现3D旋转相册(示例代码)

静态效果图：

代码如下：

Document

*{margin: 0;padding: 0;}

ul{

width: 200px;

height: 200px;

list-style: none;

margin: 100px auto;

position: relative;

transform-style: preserve-3d;

animation:xuanzhuan 6s linear infinite;

}

ul li{

width: 200px;

line-height: 200px;

text-align: center;

position: absolute;

left: 0;

top: 0;

}

ul li:nth-child(1){

background-color: red;

transform:rotateY(60deg) translateZ(200px);

}

ul li:nth-child(2){

background-color: orange;

transform:rotateY(120deg) translateZ(200px);

}

ul li:nth-child(3){

background-color: yellow;

transform:rotateY(180deg) translateZ(200px);

}

ul li:nth-child(4){

background-color: green;

transform:rotateY(240deg) translateZ(200px);

}

ul li:nth-child(5){

background-color: tomato;

transform:rotateY(300deg) translateZ(200px);

}

ul li:nth-child(6){

background-color: blue;

transform:rotateY(360deg) translateZ(200px);

}

ul:hover{

animation-play-state:paused;

}

@keyframes xuanzhuan{

from{

transform:rotateX(-10deg) rotateY(0deg);

}

to{transform:rotateX(-10deg) rotateY(360deg);

}

计算机3d相册代码,CSS3实现3D旋转相册(示例代码)相关推荐

html渐变线条代码,CSS3实现线性渐变用法示例代码详解
前言演示下太老版本浏览器的渐变实现了[IE9-]; IE9以前,渐变都是通过滤镜实现的,大体的写法就是这样; .testDiv { width:400px; height:400px; border ...
java学习类变量类方法_这篇文章主要介绍了JAVA类变量及类方法代码实例详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下类变量(...
这篇文章主要介绍了JAVA类变量及类方法代码实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下类变量(static) 类变量是该类的所有对象共 ...
html怎么制作3D字体,用CSS3制作3D文字效果代码实例教程
这个简单的CSS文本阴影教程将一步步教你如何通过堆叠多层阴影来创建3D文字,然后进一步利用CSS3的transform和transition属性来实现鼠标移过字体放大的效果. 阿里西西web开发网为大 ...
html怎么做成3d正方体,利用CSS3的3D效果制作正方体
学会用CSS3的3D效果制作一个正方体,有助于增强我们对3D场景的旋转和位移属性的理解.下面的动态图就是利用3D旋转位移,结合动画效果制作的.感兴趣的同学可以在完成正方体的制作基础上,再去探究一下添加 ...
css使图片有3d效果,利用CSS3实现3D倾斜视差图片展示特效
特效描述:利用CSS3实现 3D倾斜视差图片展示特效.利用CSS3实现3D倾斜视差图片展示特效代码结构 1. HTML代码 Movies Popular Princess Mononoke Sp ...
html图片鼠标动态效果代码,CSS3鼠标hover图片动画特效代码
这是一款CSS3鼠标hover图片动画特效代码.该鼠标hover动画使用简单的CSS transition技术,配合元素的宽度变化,制作出炫酷的鼠标hover图片遮罩层动画效果. 使用方法在页面中引 ...
php发光字体代码,CSS3实现字体发光效果（代码实例）
本文给大家介绍CSS3如何实现字体发光效果(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. text-shadow 该属性为文本添加阴影效果text-shadow: h- ...
html %3c自动转化,一行代码让谷歌浏览器变成在线编辑器(示例代码)
这个比较好玩,或许有时能用上. 只需在浏览器地址栏里输入一行代码: data:text/html, 为什么它能奏效? 这是用了数据URI的格式(Data URI's format),并告诉浏览器渲染 ...
微软一站式示例代码库 2012 年2月示例代码更新。8个全新示例为您的开发保驾护航...
微软一站式示例代码库2012年2月新代码示例发布.我们发布了8个全新的示例代码,内容包含Windows Azure, Directory Services, Hyper-V, TFS, WDK和Win ...
ajax异步传输代码,Ajax同步与异步传输的示例代码
这篇文章主要是对Ajax同步与异步传输的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助代码如下: //同步传输模式 function RequestByGet(nProductte ...

计算机3d相册代码,CSS3实现3D旋转相册(示例代码)

计算机3d相册代码,CSS3实现3D旋转相册(示例代码)相关推荐

最新文章

热门文章