* {
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. 【python】人脸识别

    #coding:utf-8# from __future__ import print_functionfrom time import time #有些步骤要计时,看每个步骤花多长时间import ...

  2. 2022年官网下安装RabbitMQ最全版与官网查阅方法

    目录 一.Erlang环境部署 1.百度搜索"Erlang",或者访问网址:https://www.erlang.org/,找到DOWNLOAD双击进入. 2.找到支持的windo ...

  3. PHP message:filesize(): stat failed for 错误

    PHP message:filesize(): stat failed for 错误 message:filesize(): stat failed for F:s2017\SinaImgUpload ...

  4. 解决移动端ios网页端收起键盘导致的页面空白问题

    一句代码就搞定了,只要失焦的时候把窗口滚动位置设置到(0,0)就行了 <input type="text" onblur="window.scrollTo(0, 0 ...

  5. 商品模型:SPU、商品、SKU概念模型设计

    商品系统是电商SaaS.新零售SaaS最基础.最核心的系统之一.商品系统几乎需要支撑所有业务系统,商品详情.购物车.订单.履约.结算.售后.库存.供应链等,都需要依赖商品系统的能力.为了保障业务的稳定 ...

  6. Azure Container App(一)应用介绍

    一,引言 容器技术正日益成为打包.部署应用程序的第一选择.Azure 提供了许多使用容器的选项.例如,我们可以使用 Azure 容器注册表来存储和管理 Docker Images.Azure Cont ...

  7. Java8 中的流式数据处理

    java8的流式处理极大了简化我们对于集合.数组等结构的操作,让我们可以以函数式的思想去操作,本篇文章将探讨java8的流式数据处理的基本使用. 一. 流式处理简介 在我接触到java8流式处理的时候 ...

  8. OpenCV基础_二

    阈值和平滑处理 cv2.threshold()二值化函数 ret,thresh = cv2.threshold(src, thresh, maxval, type[, dst]) 参数 src:所要进 ...

  9. 嵌入式linux驱动开发 笔记

    @ 目录 首个驱动hellodrv 1.编写源码 2.编译模块 3.加载驱动 首个驱动hellodrv 3.如果下载不到,就自己编写,并编译驱动. 1.编写源码 2.编译模块 1.先写makefile ...

  10. python 自定义加密与解密

    import tkinter import webbrowser import re #本程序是一个中文字符和中文检测工具 #中文字符自己添加,我只添加了一点 #输入字符串,点击检查文本即可判断有没有 ...