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. Pig Flatten 解包操作,解元组

    Flatten Operator The FLATTEN operator looks like a UDF syntactically, but it is actually an operator ...

  2. 想以编程为职业,现在正在看毕向东的java基础,接下来应该看什么视频,求前辈们指教。

    想以编程为职业,现在正在看毕向东的java基础,接下来应该看什么视频,求前辈们指教. https://zhidao.baidu.com/question/1368482680246425699.htm ...

  3. 面试题18(一):在O(1)时间删除链表结点

    // 面试题18(一):在O(1)时间删除链表结点 // 题目:给定单向链表的头指针和一个结点指针,定义一个函数在O(1)时间删除该 // 结点.链表结点与函数的定义如下: // struct Lis ...

  4. hdu1056

    #include <cstdio> void main(){ double length; double l[300]; l[1] = 1.0/2; int i; for (i = 2;; ...

  5. IOHelper(自制常用的输入输出的帮助类)

    常用的读写文件,和地址转换(win和linux均支持),操作文件再也不是拼接那么的low了 using System; using System.Diagnostics; using System.I ...

  6. [CentOS7] 搭建vncserver,远程通过vncviewer来查看图形界面

    Linux上搭建vncserver需下载tigervnc,当然可以从命令下载: 查看一下可以下载哪些: 下载tigervnc-server: 然后可以简单看下 cat /lib/systemd/sys ...

  7. MCP|ZWT|Precision de novo peptide sequencing using mirror proteases of Ac-LysargiNase and trypsin for large-scale proteomics(基于Ac-LysargiNase和胰蛋白酶的蛋白组镜像de novo测序)

    一.概述 由于难以获得100%的蛋白氨基酸序列覆盖率,蛋白组de novo测序成为了蛋白测序的难点,由Ac-LysargiNase(N端蛋白酶)和胰蛋白酶构成的镜像酶组合可以解决这个问题并具有稳定性, ...

  8. 关于Android模块化我有一些话不知当讲不当讲

    关于Android模块化我有一些话不知当讲不当讲 最近公司一个项目使用了模块化设计,本人参与其中的一个小模块开发,但是整体的设计并不是我架构设计的,开发半年有余,在此记录下来我的想法. 关于Andro ...

  9. Collections.copy

    List<String> names = Arrays.asList(new String[nameList.size()]); Collections.copy(names, nameL ...

  10. jvm 锁Lock

    自旋锁 线程想要获得一个对象的锁,如果没有得到,会继承占用CPU尝试获取锁, 线程不进入阻塞状态,仍然在Running 锁消除 public void lockTest() { String aa = ...