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. 7、RNAseq Downstream Analysis

    Created by Dennis C Wylie, last modified on Jun 29, 2015 Machine learning methods (including cluster ...

  2. 6 大主流 Web 框架优缺点对比：15篇前端热文回看

    摘自:http://blog.csdn.net/VhWfR2u02Q/article/details/78993079 注:以下文章,点击标题即可阅读 <6 大主流 Web 框架优缺点对比> ...

  3. 1.Windows入侵排查思路

    0x00 前言 当企业发生黑客入侵.系统崩溃或其它影响业务正常运行的安全事件时,急需第一时间进行处理,使企业的网络信息系统在最短时间内恢复正常工作,进一步查找入侵来源,还原入侵事故过程,同时给出解决方 ...

  4. TMF SID中的角色模式

    角色模式 Copyright © TeleManagement Forum 2013. All Rights Reserved. This document and translations of i ...

  5. Element-ui Cascader 级联选择器 同时返回 value 和 label

    给 cascader 组件赋值一个别名 ref="cascaderAddr" <el-form-item label="部门" prop="or ...

  6. CodeForces 114B 【STL应用】

    思路: 原来string类能sort 和 swap....太强了.... 注意:字典序最小输出,因为某个地方写挫了,sort了n发,代码挫. #include <bits/stdc++.h> ...

  7. Spark Checkpoint 概述

    有时候,Transformation 的 RDD 非常多或者具体 Transformation 产生的 RDD 本身计算特别复杂和耗时,此时我们必须考虑对计算结果数据进行持久化.与 persist 不 ...

  8. 51nod1021(区间dp)

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1021 题意:中文题诶- 思路:区间dp 我们用num[i]存 ...

  9. java中pojo对象首字母大写导致无法赋值问题

    命名规范(文末附有java命名规范)中指出,属性变量命名应采用驼峰命名的方式,即首字母小写,其他单词首字母大写: 但有时候我们对接三方的接口时,想要封装实体类来接受,但是发现接收到的参数的变量首字母是 ...

  10. ios 自定义导航栏，开启侧滑返回手势

    自定义一个常用ListViewController .h文件 #import <UIKit/UIKit.h> @interface ListViewController : UIViewC ...