css钻石旋转实现

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钻石旋转实现的更多相关文章

CSS之旋转立方体
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
css做旋转相册效果
css做旋转相册效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
js+css立体旋转
纯 CSS3 制作可口可乐罐这个效果相信大家很多人看过了,纯css实现的立体可口可乐罐,看起来相当高大上~ 于是今天我这小菜鸟试着研究下,稍微遗憾的是,没有看到源码,还是直接F12吧,貌似实现也不 ...
CSS 3D旋转 hover 后设置transform 是相对于正常位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
css transform旋转属性
将以下代码复制到本地就可以看到效果: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
CSS transform旋转问题
我们都知道css的transform可以让旋转多少角度:transform:rotate(90deg),但是设置后只能旋转一次,如何想让它一直旋转下去怎么办?一种是使用matrix属性获取当前tran ...
css制作旋转风车（transform 篇）
做这个案例之前首先要大概了解CSS的transform的属性 transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜. 看看效果图打开的时候自动旋转 ...
CSS色调旋转滤镜
一关于filter 首先看一下官方对于CSS的filter属性的定义: CSS属性将模糊或颜色偏移等图形效果应用于元素.滤镜通常用于调整图像,背景和边框的渲染. 本文主要讲的是filter中的一个属 ...
个人制作-css+html旋转立方体的制作
源代码: <!DOCTYPE html><html><head> <title></title> <meta charse ...

随机推荐

在命令行上启动genymotion虚拟机
自从有了genymotion,多机联调就解放了,一台电脑运行两个genymotion虚拟机毫无压力,不过也看用的是哪种os image,之前我以为google自己的Nexus应该最适应,哪知道开起来比 ...
Luogu 4556 雨天的尾巴
主席树+线段树合并. 首先我们想一想如果只有一个结点的话,我们弄一个权值线段树就可以随便维护了. 那么我们可以运用差分的思想,把一个询问拆成四个操作,对于一个询问$(x, y, v)$,我们在$x$的 ...
Spring入门第三十课
基于XML的方式配置事务直接看代码: package logan.study.spring.tx.xml; public interface BookShopDao { //根据书号获取书的单价 p ...
不出现用户帐户控制-让Win7的用户账户控制(UAC)放过信任的程序
微软有个官方工具 Microsoft Application Compatibility Toolkit: http://www.microsoft.com/downloads/details.asp ...
解决Navicat 无法连接mysql8.0
必须执行下面两个步骤,缺一不可. 一. mysql8.0加密方式与mysql5几加密方式不同,需要先更改加密方式. 更改加密方式 ALTERUSER 'root'@'localhost' ...
DES加密解决算法
/// <summary> /// DES加密算法 /// sKey为8位或16位 /// </summary> /// <param name="pToEnc ...
C#识别图中二维码
1.在NuGet中添加 ZXing.Net 2.实例代码 /// <summary> /// 识别图中二维码 /// </summary> /// <param name ...
Black Beauty
Chapter 1 My Early Home While I was young, I live upon my mother's milk, as I could not eat grass. W ...
Spring MVC 参数的绑定方法
在Spring MVC中,常见的应用场景就是给请求的Url绑定参数.本篇就介绍两种最最基本的绑定参数的方式: 基于@RequestParam 这种方法一般用于在URL后使用?添加参数,比如: @Req ...
Dedecms本地上传缩略图无法自动添加水印的解决方法
客户遇到一个问题,DEDECMS(V5.7)后台添加文档时,本地上传缩略图无法自动添加水印(系统设置里的图片水印设置没有问题),找了半天,终于找到了解决方法,留个记号: 打开dede/archives ...

css钻石旋转实现

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

随机推荐

热门专题