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. Tournament

    题意: 有 $n$ 个 $K$ 维向量,若向量A只要有任意一维大于向量B,则认为A可能打败B,将n个向量一个一个加入,求问对于每次加完后的向量集合:有几个向量可能活到最后. 解法: 考虑如果A可以打败 ...

  2. KickStart安装CentOS，同时安装和配置hadoop

    声明:这篇文章是前面是拾人牙慧,我是结合 http://www.111cn.net/sys/linux/59969.htm 和 http://www.cnblogs.com/mchina/p/cent ...

  3. JavaScript的内部对象

    JavaScript的内部对象 按创建方式不同分为:使用变量声明的隐性对象,使用new创建的显性对象 隐性对象 在赋值和声明后就是一个隐性对象,隐性对象不支持prototype属性,也无法随意扩展对象 ...

  4. 31.TCP/IP 三次握手与四次挥手

    TCP/IP三次握手 TCP建立连接为什么是三次握手,而不是两次或四次? TCP,名为传输控制协议,是一种可靠的传输层协议,IP协议号为6. 顺便说一句,原则上任何数据传输都无法确保绝对可靠,三次握手 ...

  5. 《鸟哥的Linux私房菜》读书笔记1

    1.MBR 可以说是整个硬盘最重要的地方了,因为在 MBR 里面记录了两个重要的东西,分别是:开机管理程序,与磁盘分割表 ( partition table ).下次记得人家在谈磁盘分割的时候, 不要 ...

  6. 探索ElasticSearch（一）

    1.    什么是ElasticSearch: ElasticSearch是基于lucene采用java语言开发的一个服务产品,旨在方便全文检索.分担web服务及数据库服务压力.可以理解为文件系列类型 ...

  7. Ajax.BeginForm 使用过程中遇到的问题

    一.Ajax.BeginForm设置的路由在浏览器中解析不到. 问题截图:在视图中设置"Counter/Index",在浏览器中显示的是"action='/'" ...

  8. 【leetcode 3. 无重复字符的最长子串】解题报告

    思路:滑动窗口的思想 方法一:滑动窗口 int lengthOfLongestSubstring(string s) { /* 控制一个滑动窗口,窗口内的字符都是不重复的,通过set可以做到判断字符是 ...

  9. explain SQL语句()

    坊间有传言:MySQL性能优化有个神器,叫做explain,它可以对select语句进行分析并且输出详细的select执行过程的详细信息,让开发者从这些信息中获得优化的思路. 下面来讲讲这个MySQL ...

  10. 实现html页面只自动跳转一次

    function show(){ var  value= sessionStorage.getItem("flg"); if(value==null || value==undef ...