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. pip 在windows下如何升级

    建议:由于是pip的国外的,在更新之前先开启vpn,这样更新会顺畅些. 官方网页要求在 cmd中输入以下命令进行 pip的 更新: python -m pip install -U pip 更新成功后 ...

  2. es6基础系列五--数组的拓展

    Array.from() 用于将两类对象转为真正的数组,类似数组对象和可遍历对象(包括数据结构Set和Map)转化为数组 格式:Array.from(arrayLike[, mapFn[, thisA ...

  3. hdu1058

    #include<iostream> #include<string> using namespace std; int const N = 4; int map[N] = { ...

  4. DataSet,DataTable,DataColumn,DataRow的常用操作

    DataSet 这个玩意没什么好讲的,当ado.net查询出有多张表集合的数据返回时,这个时候就会使用到DataSet. DataTable //表之间直接赋值 dt2=dt1; 两者指向同一内存空间 ...

  5. .Net Core WebApi返回日期格式的问题

    环境:.net core 2.1 webapi 问题简介: 返回DateTime,前端接收到的字符有时候为2018-01-01T12:01:01,有时候为2018-01-01T01:01:01.722 ...

  6. 关于.net Core项目发布在Linux上的填坑

    本文主要记录.net Core项目发布在Linux服务器上面所遇到的问题,防止遗忘是 1.在发布文件中执行 dotnet xxxxxx.dll的时候提示如下错误: An assembly specif ...

  7. Boost Python学习笔记（四）

    你将学到什么 在Python中调用C++代码时的传参问题 基础类型 Python的字符串是常量,所以C++函数参数中的std::string &必须为const 修改源文件(main.cpp) ...

  8. vue-cli目录结构及说明

    使用vue-cli有时会出现一些莫名的问题,清楚项目的结构文件及其意义方便更好的开发和解决问题,介绍如下: build/ // 项目构建(webpack)相关代码 build.js // 生产环境构建 ...

  9. 设计模式——懒汉式单例类PK饿汉式单例类

    前言 我们都知道生活中好多小软件,有的支持多IP在线,有的仅仅局限于单个IP在线.为什么这样设计,在软件开发阶段就是,有需求就是发展.这就是软件开发的一个设计模式--懒汉式单例类和饿汉式单例类. 内容 ...

  10. poj 2068 Nim

    Nim POJ - 2068 题目大意:多组数据,两人轮流操作,n轮一循环,给出总石子数和这n轮每次两人能取的石子上限(下限为1).取到最后一颗者输. /* f[i][j]表示在第i轮中一共有j个石子 ...