css钻石旋转实现:

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style type="text/css">

			/* 钻石旋转

			 * 要实现这个钻石旋转: 首先需要明确这个钻石分为上下两个部分,上面包含六个正三角形,下面有6个倒三角形

			 * css实现正三角形：上右下左的方向 border-style: solid;border-color:transparent;border-width: 0 50px 170px 50px; border-bottom-color: rgba(255,0,0,0.5)

			 * css实现倒三角形：上右下左的方向 border-style: solid;border-color:transparent;border-width: 170px 50px 0 50px; border-top-color: rgba(255,0,0,0.5)

			 * 然后提供一个3D环境，给外层盒子添加 transform-style: preserve-3d;flat 所有的子元素在2D平面中;preserve-3D 所有的子元素 在3D 平面中

			 * 上面的三角形设置为绝对定位 absolute

			 * 使用css3的transform 三角形按角度转动 排列成钻石的上半部分，同理实现下半部分

			 * rotateY:沿着Y轴实现旋转,translateZ:沿着Z轴移动88px;沿着X轴 旋转31度

			 * 写一个动画tuoluo 0～50%～100%  沿着z轴旋转

			 * 实现动画的循环播放animation: tuoluo 3s linear infinite; */

			/*@keysframes*/

			.wrap{

				width: 200px;

				height: 400px;

				margin: 30px auto;

			}

			@keyframes tuoluo{

				0%{

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

				}

				50%{

					transform: rotateY(-180deg) rotateX(18deg);

				}

				100%{

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

				}

			}

			.wrap .tuoluo{

				width: 100%;

				height: 100%;

				transform-style: preserve-3d;

				/* flat 所有的子元素在2D平面中*/

				/* preserve-3D 所有的子元素 在3D 平面中*/

				animation: tuoluo 3s linear infinite;

			}

			.wrap .tuoluo .tuoluo-top,

			.wrap .tuoluo .tuoluo-bottom{

				position: relative;

				width: 100%;

				height: 50%;

			}

			.tuoluo-top .face-top{

				position: absolute;

				top: 29px;

				width: 0;

				height: 0;

				border-style: solid;

				border-color: transparent;

				border-width: 0 50px 170px 50px;

				border-bottom-color: rgba(65,92,162,.5);

				/*元素变形基点的位置*/

				transform-origin: center bottom;

			}

			.tuoluo-top .face-top:nth-of-type(1){

				transform: rotateY(0deg) translateZ(88px) rotateX(31deg);

			}

			.tuoluo-top .face-top:nth-of-type(2){

				transform: rotateY(60deg) translateZ(88px) rotateX(31deg);

			}

			.tuoluo-top .face-top:nth-of-type(3){

				transform: rotateY(120deg) translateZ(88px) rotateX(31deg);

			}

			.tuoluo-top .face-top:nth-of-type(4){

				transform: rotateY(180deg) translateZ(88px) rotateX(31deg);

			}

			.tuoluo-top .face-top:nth-of-type(5){

				transform: rotateY(240deg) translateZ(88px) rotateX(31deg);

			}

			.tuoluo-top .face-top:nth-of-type(6){

				transform: rotateY(300deg) translateZ(88px) rotateX(31deg);

			}

			.tuoluo-bottom .face-bottom{

				position: absolute;

				width: 0;

				height: 0;

				border-style: solid;

				border-color: transparent;

				border-width: 170px 50px 0 50px;

				border-top-color: rgba(65,92,162,.5);

				/*元素变形基点的位置*/

				transform-origin: center top;

			}

			.tuoluo-bottom .face-bottom:nth-of-type(1){

				transform: rotateY(0deg) translateZ(88px) rotateX(-31deg);

			}

			.tuoluo-bottom .face-bottom:nth-of-type(2){

				transform: rotateY(60deg) translateZ(88px) rotateX(-31deg);

			}

			.tuoluo-bottom .face-bottom:nth-of-type(3){

				transform: rotateY(120deg) translateZ(88px) rotateX(-31deg);

			}

			.tuoluo-bottom .face-bottom:nth-of-type(4){

				transform: rotateY(180deg) translateZ(88px) rotateX(-31deg);

			}

			.tuoluo-bottom .face-bottom:nth-of-type(5){

				transform: rotateY(240deg) translateZ(88px) rotateX(-31deg);

			}

			.tuoluo-bottom .face-bottom:nth-of-type(6){

				transform: rotateY(300deg) translateZ(88px) rotateX(-31deg);

			}

		</style>

	</head>

	<body>

		<div class="wrap">

			<div class="tuoluo">

				<div class="tuoluo-top">

					<div class="face-top"></div>

					<div class="face-top"></div>

					<div class="face-top"></div>

					<div class="face-top"></div>

					<div class="face-top"></div>

					<div class="face-top"></div>

				</div>

				<div class="tuoluo-bottom">

					<div class="face-bottom"></div>

					<div class="face-bottom"></div>

					<div class="face-bottom"></div>

					<div class="face-bottom"></div>

					<div class="face-bottom"></div>

					<div class="face-bottom"></div>

				</div>

			</div>

		</div>

	</body>

</html>

　　

css钻石旋转实现的更多相关文章

  1. CSS之旋转立方体

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. css做旋转相册效果

    css做旋转相册效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  3. js+css立体旋转

    纯 CSS3 制作可口可乐罐  这个效果相信大家很多人看过了,纯css实现的立体可口可乐罐,看起来相当高大上~ 于是今天我这小菜鸟试着研究下,稍微遗憾的是,没有看到源码,还是直接F12吧,貌似实现也不 ...

  4. CSS 3D旋转 hover 后设置transform 是相对于正常位置

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. css transform旋转属性

    将以下代码复制到本地就可以看到效果: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  6. CSS transform旋转问题

    我们都知道css的transform可以让旋转多少角度:transform:rotate(90deg),但是设置后只能旋转一次,如何想让它一直旋转下去怎么办?一种是使用matrix属性获取当前tran ...

  7. css制作旋转风车（transform 篇）

    做这个案例之前首先要大概了解CSS的transform的属性 transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜. 看看效果图 打开的时候自动旋转 ...

  8. CSS色调旋转滤镜

    一 关于filter 首先看一下官方对于CSS的filter属性的定义: CSS属性将模糊或颜色偏移等图形效果应用于元素.滤镜通常用于调整图像,背景和边框的渲染. 本文主要讲的是filter中的一个属 ...

  9. 个人制作-css+html旋转立方体的制作

    源代码: <!DOCTYPE html><html><head>    <title></title>    <meta charse ...

随机推荐

  1. 获取显示屏的个数和分辨率 --- 通过使用OpenGL的GLFW库

    获取显示屏的个数和分辨率 - 通过使用OpenGL的GLFW库 程序 #include <iostream> // GLFW #include <GLFW/glfw3.h> i ...

  2. web 系统原理之路由器和交换机的区别

    工作层次不同: 交换机主要工作在数据链路层(第二层) 路由器工作在网络层(第三层). 转发依据不同: 交换机转发所依据的对象时:MAC地址.(物理地址) 路由转发所依据的对象是:IP地址.(网络地址) ...

  3. Java垃圾回收机制(Garbage Collection)

    引用博客地址:http://www.cnblogs.com/ywl925/p/3925637.html 以下两篇博客综合描述Java垃圾回收机制 第一篇:说的比较多,但是不详细 http://www. ...

  4. LeetCode第20题：有效的括号

    问题描述: 给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效. 有效字符串需满足: 左括号必须用相同类型的右括号闭合. 左括号必须以正确的顺序闭合. 注意空 ...

  5. IQA(图像质量评估)

    图像质量评价(Image Quality Assessment,IQA)是图像处理中的基本技术之一,主要通过对图像进行特性分析研究,然后评估出图像优劣(图像失真程度). 主要的目的是使用合适的评价指标 ...

  6. 【关于安装mysql5.6的一些问题总结】

    1:安装msyql5.6介质(mysql-5.6.24-winx64.msi)以后没有myslq服务: 解决: 管理员身份cmd进入bin目录: mysqld.exe -install Service ...

  7. Window 7 安装Docker toolbox , 启动terminal时遇到的小问题

    参考:http://blog.csdn.net/tina_ttl/article/details/51372604 参考前面网页成功安装后打开terminal,出现下面问题: Looks like s ...

  8. Java中的Junit单元测试

    测试方法必须使用@Test进行修饰 测试方法必须使用public void 进行修饰,不能带任何的参数 新建一个源代码目录来存放我们的测试代码 测试类的包名应该和被测试类的包名一致 测试单元中的每个方 ...

  9. Exception异常处理

    1.java异常类: 都是Throwable的子类: 1.Exception(异常) :是程序本身可以处理的异常. 2.Error(错误): 是程序无法处理的错误.这些错误表示故障发生于虚拟机自身.或 ...

  10. 【转载】C#中可使用Unity容器实现属性注入

    简介 Unity :Unity是微软团队开发的一个轻量级,可扩展的依赖注入容器,为松散耦合应用程序提供了很好的解决方案,支持构造器注入,属性注入,方法注入. 控制反转:(Inversion of Co ...