html代码设置五边形,css实现五边形旋转效果代码

css实现五边形旋转效果代码

时间：2019-08-05 12:02:02  来源：  作者：

3D旋转5边型

.container {

perspective: 500px;

width: 200px;

height: 200px;

margin: 200px auto 0;

}

.face-box {

position: relative;

width: 200px;

height: 200px;

transform-style: preserve-3d;

transform-origin: 50% 50%;

animation: rotatea 15s linear infinite alternate;

}

@keyframes rotatea {

100% {

transform: rotateX(360deg);

}

}

.face-box .face {

position: absolute;

width: 200px;

height: 200px;

font-size: 100px;

text-align: center;

line-height: 200px;

}

.one{

background: rgba(0, 0, 255, 1);

transform: rotateX(0deg) translateZ(138px);

}

.two {

background: rgba(255, 0, 255, 1);

transform: rotateX(288deg) translateZ(138px);

}

.three{

background: rgba(0, 255, 255, 1);

transform: rotateX(216deg) translateZ(138px);

}

.four{

background: rgba(255, 0, 0, 1);

transform: rotateX(144deg) translateZ(138px);

}

.five {

background: rgba(0, 255, 0, 1);

transform: rotateX(72deg) translateZ(138px);

}

1

2

3

4

5

Tags：css

点击:()  评论:()

声明：本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系，我们将及时更正、删除，谢谢。

▌相关评论

用户名:

密码:

验证码:

匿名发表

▌相关推荐

简介CSS 是什么？ CSS是Cascading Style Sheets的简称，中文称为层叠样式表。属性和属性值用冒号隔开，以分号结尾。CSS 四种引入方式：1.行内式行内式是在标签的style属性中设定CSS...【详细内容】

2021-03-18

css 点击:(7)　　评论:(0)　　加入收藏

知识要点 1、:valid 用于匹配输入值为合法的元素2、:invalid用于匹配输入值为非法的元素3、required 属性规定必需在提交之前填写输入字段4、pattern 属性规定用于验证输入...【详细内容】

2021-03-03

css 点击:(11)　　评论:(0)　　加入收藏

在用纯CSS实现这些效果之前，笔者先介绍几个常用的SCSS Mixin和一个得力武器，用它们来进行创作将会事半功倍覆盖 - cover@mixin cover($top: 0, $left: 0, $width: 100%, $heig...【详细内容】

2021-01-12

css 点击:(24)　　评论:(0)　　加入收藏

CSS代码要写在哪里呢？一共有4种编写位置。 1 内嵌式 顾名思义，内嵌式就是直接嵌在html文件中。 就是在

标签对中，写标签对，然后在标...【详细内容】

2020-11-26

css 点击:(11)　　评论:(0)　　加入收藏

在浏览器开始实现它们之前，CSS 新的功能通常需要经过长时间讨论之后，才在W3联盟的规范中定义。有许多值得一提的 CSS 新功能，但是在本文中，我们重点介绍可以浏览器的稳定版中进...【详细内容】

2020-11-11

css 点击:(8)　　评论:(0)　　加入收藏

php、asp、js判断客户端输出对应的样式 ------------------- 1.媒体查询方法在 css 里面这样写 --------------------@media screen and (min-width: 320px) and (max-width...【详细内容】

2020-11-06

css 点击:(20)　　评论:(0)　　加入收藏

这篇文章我们来谈谈字体设置Font&边框Border的基础用法。1.字体设置Font1).字体系列

2020-09-07

css 点击:(18)　　评论:(0)　　加入收藏

简介CSS 包含了许多函数，而且它能够完成许多早期需要用 JavaScript才能完成的事情。每年都有新的特性被添加进来，这让我们的开发更加轻松，也减少了对JavaScript的依赖。CSS 函...【详细内容】

2020-09-07

css 点击:(16)　　评论:(0)　　加入收藏

上篇文章主要讲述了CSS样式更改中的背景Background，这篇文章我们来谈谈文本Content内容的基础用法

1)).首行缩进文本

2020-09-07

css 点击:(15)　　评论:(0)　　加入收藏

作者 | Adam Giese译者 | 王强CSS 中有两种颜色模型 RGB 和 HSL，如何用 JavaScript 控制它们？背景知识：颜色模型点开这篇文章的你，肯定是想要学习怎样控制颜色的—&mdash...【详细内容】

2020-09-03

css 点击:(13)　　评论:(0)　　加入收藏

▌简易百科推荐

简介CSS 是什么？ CSS是Cascading Style Sheets的简称，中文称为层叠样式表。属性和属性值用冒号隔开，以分号结尾。CSS 四种引入方式：1.行内式行内式是在标签的style属性中设定CSS...【详细内容】

2021-03-18　CSS

点击:(7)　　评论:(0)　　加入收藏

知识要点 1、:valid 用于匹配输入值为合法的元素2、:invalid用于匹配输入值为非法的元素3、required 属性规定必需在提交之前填写输入字段4、pattern 属性规定用于验证输入...【详细内容】

2021-03-03　CSS3伪类

点击:(11)　　评论:(0)　　加入收藏

在用纯CSS实现这些效果之前，笔者先介绍几个常用的SCSS Mixin和一个得力武器，用它们来进行创作将会事半功倍覆盖 - cover@mixin cover($top: 0, $left: 0, $width: 100%, $heig...【详细内容】

2021-01-12　CSS

点击:(24)　　评论:(0)　　加入收藏

CSS代码要写在哪里呢？一共有4种编写位置。 1 内嵌式 顾名思义，内嵌式就是直接嵌在html文件中。 就是在

标签对中，写标签对，然后在标...【详细内容】

2020-11-26　CSS

点击:(11)　　评论:(0)　　加入收藏

在浏览器开始实现它们之前，CSS 新的功能通常需要经过长时间讨论之后，才在W3联盟的规范中定义。有许多值得一提的 CSS 新功能，但是在本文中，我们重点介绍可以浏览器的稳定版中进...【详细内容】

2020-11-11　CSS 新功能

点击:(8)　　评论:(0)　　加入收藏

php、asp、js判断客户端输出对应的样式 ------------------- 1.媒体查询方法在 css 里面这样写 --------------------@media screen and (min-width: 320px) and (max-width...【详细内容】

2020-11-06　CSS

点击:(20)　　评论:(0)　　加入收藏

这篇文章我们来谈谈字体设置Font&边框Border的基础用法。1.字体设置Font1).字体系列

2020-09-07　CSS样式

点击:(18)　　评论:(0)　　加入收藏

简介CSS 包含了许多函数，而且它能够完成许多早期需要用 JavaScript才能完成的事情。每年都有新的特性被添加进来，这让我们的开发更加轻松，也减少了对JavaScript的依赖。CSS 函...【详细内容】

2020-09-07　CSS 函数

点击:(16)　　评论:(0)　　加入收藏

上篇文章主要讲述了CSS样式更改中的背景Background，这篇文章我们来谈谈文本Content内容的基础用法

1)).首行缩进文本

2020-09-07　CSS样式

点击:(15)　　评论:(0)　　加入收藏

作者 | Adam Giese译者 | 王强CSS 中有两种颜色模型 RGB 和 HSL，如何用 JavaScript 控制它们？背景知识：颜色模型点开这篇文章的你，肯定是想要学习怎样控制颜色的—&mdash...【详细内容】

2020-09-03　CSS颜色

点击:(13)　　评论:(0)　　加入收藏