* {
margin: 0;
padding: 0;
} .stage {
width: 200px;
height: 130px;
margin: 100px auto;
position: relative;
perspective: 1300px;
perspective-origin: 100px -400px;
} .stage ul {
list-style: none;
width: 100%;
height: 100%;
} img {
backface-visibility: hidden;
} #ring {
width: 200px;
height: 130px;
position: absolute;
top: 0;
/*transform: rotateY(0deg);*/
left: 0;
transform-style: preserve-3d;
transition: all 1s ease 0s;
} .stage ul li {
position: absolute;
top: 0;
left: 0;
/*transform-origin: 30% 50%;*/
} .stage ul li:nth-of-type(1) {
transform: rotateY(0deg) translateZ(308px);
} .stage ul li:nth-of-type(2) {
transform: rotateY(36deg) translateZ(308px);
} .stage ul li:nth-of-type(3) {
transform: rotateY(72deg) translateZ(308px);
} .stage ul li:nth-of-type(4) {
transform: rotateY(108deg) translateZ(308px);
} .stage ul li:nth-of-type(5) {
transform: rotateY(144deg) translateZ(308px);
} .stage ul li:nth-of-type(6) {
transform: rotateY(180deg) translateZ(308px);
} .stage ul li:nth-of-type(7) {
transform: rotateY(216deg) translateZ(308px);
} .stage ul li:nth-of-type(8) {
transform: rotateY(252deg) translateZ(308px);
} .stage ul li:nth-of-type(9) {
transform: rotateY(288deg) translateZ(308px);
} .stage ul li:nth-of-type(10) {
transform: rotateY(324deg) translateZ(308px);
} h2 {
position: absolute;
z-index: 10;
opacity: 0.8;
color: hotpink;
}
window.onload = function() {
var ring = document.getElementById('ring');
var lis = ring.getElementsByTagName('li'); for (var i = 0; i < lis.length; i++) {
lis[i].idx = i;
lis[i].onclick = function() {
ring.style.transform = 'rotateY(-' + (this.idx * 36) + 'deg)';
}
}
}
 <div class="stage">
<h2>点我我到最前面</h2>
<ul id="ring"> <li><img src="data:images/88/1.jpg" alt=""></li>
<li><img src="data:images/88/2.jpg" alt=""></li>
<li><img src="data:images/88/3.jpg" alt=""></li>
<li><img src="data:images/88/4.jpg" alt=""></li>
<li><img src="data:images/88/5.jpg" alt=""></li>
<li><img src="data:images/88/10.jpg" alt=""></li>
<li><img src="data:images/88/6.jpg" alt=""></li>
<li><img src="data:images/88/7.jpg" alt=""></li>
<li><img src="data:images/88/8.jpg" alt=""></li>
<li><img src="data:images/88/9.jpg" alt=""></li>
</ul>
</div>

图片的选择需要选择400*400的图片

利用css3渐变效果实现圆环旋转效果的更多相关文章

  1. 利用CSS3实现图片无间断轮播图的实现思路

    前言:图片轮播效果现在在各大网站都是非常普遍的,以前我们都是通过postion的left or right来控制dom的移动,这里我要说的是利用css3来制作轮播!相比以前通过postion来移动do ...

  2. 利用CSS3实现页面淡入动画特效

    利用CSS3动画属性"@keyframes "可实现一些动态特效,具体语法和参数可以网上自行学习.这篇文章主要是实践应用一下这个动画属性,实现页面淡入特效,在火狐24版.chrom ...

  3. 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果

    原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...

  4. CSS3 渐变效果

    CSS3 渐变效果 background-image: -moz-linear-gradient(top, #8fa1ff, #3757fa); /* Firefox */ background-im ...

  5. 利用CSS3 filter:drop-shadow实现纯CSS改变图片颜色

    体验更优排版请移步原文:http://blog.kwin.wang/programming/css3-filter-drop-shadow-change-color.html 之前做项目过程中有时候遇 ...

  6. 利用css3的text-shadow属性实现文字阴影乳白效果

    现在CSS3+html5的网页应用的越来越广泛了.很多网页中的字体同样可以用CSS3来实现炫酷的效果. 下面就介绍一下利用css3的text-shadow属性实现文字阴影乳白效果.这是在设计达人上面看 ...

  7. 利用CSS3制作淡入淡出动画效果

    CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致. 利用CSS3制作动画效果其原理与Flash一样,我们需要定义关键帧处的状态 ...

  8. 利用CSS3实现div页面淡入动画特效

    利用CSS3实现页面淡入动画特效   摘要 利用CSS3动画属性"@keyframes "可实现一些动态特效,具体语法和参数可以网上自行学习.这篇文章主要是实践应用一下这个动画属性 ...

  9. CSS3渐变效果工具

    推荐一个css3渐变效果工具,觉得有帮助的可以收藏下. 工具链接 CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡.CSS3 定义了两种类型的渐变(gradient ...

随机推荐

  1. linux echo用法和实例

    echo命令用于在shell中打印shell变量的值,或者直接输出指定的字符串.linux的echo命令,在shell编程中极为常用, 在终端下打印变量value的时候也是常常用到的,因此有必要了解下 ...

  2. 二级python考试大纲以及考试指导复习方案

    二级python考试大纲与复习指导 本人也是在备考二级py 可能理解不对的地方请指正 参考网络,侵权删除 考纲解读→ 一.考试介绍 1.1考试人群 ​ 全国计算机等级考试(python语言程序设计(二 ...

  3. spring框架中Bean的生命周期

    一.Bean 的完整生命周期 在传统的Java应用中,bean的生命周期很简单,使用Java关键字 new 进行Bean 的实例化,然后该Bean 就能够使用了.一旦bean不再被使用,则由Java自 ...

  4. 手写 Vue 系列 之 Vue1.x

    前言 前面我们用 12 篇文章详细讲解了 Vue2 的框架源码.接下来我们就开始手写 Vue 系列,写一个自己的 Vue 框架,用最简单的代码实现 Vue 的核心功能,进一步理解 Vue 核心原理. ...

  5. Spring Cloud Ribbon 中的 7 种负载均衡策略

    负载均衡通器常有两种实现手段,一种是服务端负载均衡器,另一种是客户端负载均衡器,而我们今天的主角 Ribbon 就属于后者--客户端负载均衡器. 服务端负载均衡器的问题是,它提供了更强的流量控制权,但 ...

  6. php 23种设计模式 - 观察者模式

    观察者模式 某个对象可以被设置为是可观察的,只要通过某种方式允许其他对象注册为观察者.每当被观察的对象改变时,会发送信息给观察者. 介绍 意图:定义对象间的一种一对多的依赖关系,当一个对象的状态发生改 ...

  7. 08 Java的方法 方法的定义

    2.方法的定义 Java的方法类似于其他语言的函数,是一段用来完成特定功能的代码片段,一般情况下,定义一个方法包含以下语法: **方法包含一个方法头和一个方法体.**下面是一个方法的所有部分: 修饰符 ...

  8. ElasticSearch7.3 学习之定制分词器(Analyzer)

    1.默认的分词器 关于分词器,前面的博客已经有介绍了,链接:ElasticSearch7.3 学习之倒排索引揭秘及初识分词器(Analyzer).这里就只介绍默认的分词器standard analyz ...

  9. JavaScript 里的 'this' 的一般解释

    本文旨在帮助自己和大家理解 JS 里的 this, 翻译.整理并改写自本人关注的一个博主 Dmitri Pavlutin,原文链接如下: https://dmitripavlutin.com/gent ...

  10. 多线程笔记(学习尚硅谷java基础教程)

    一.基本概念: 程序: 是为完成特定任务.用某种语言编写的一组指令的集合.即指一段静态的代码,静态对象. 进程: 是程序的一次执行过程,或是正在运行的一个程序.是一个动态的过程:有它自身的产生.存在和 ...