css中如何写出长方体,CSS3 可伸缩3D长方体

CSS

语言：

CSSSCSS

确定

html,

body {

height: 100%;

}

body {

font-size: 200px;

background: #000;

overflow: hidden;

perspective: 3em;

}

.container {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

transform-style: preserve-3d;

animation: container 2.1s -2.1s linear infinite;

}

@keyframes container {

from {

transform: scale3d(1, 1, 1) rotateX(-10deg) rotateY(0deg);

}

to {

transform: scale3d(0.5, 0.5, 0.5) rotateX(-10deg) rotateY(90deg);

}

.box {

position: absolute;

top: 50%;

left: 50%;

width: 1em;

height: 1em;

margin: -0.5em 0 0 -0.5em;

transform-style: preserve-3d;

}

@keyframes box {

from {

transform: scale3d(0.5, 0.5, 0.5);

}

27% {

transform: scale3d(2, 0.5, 0.5);

}

54% {

transform: scale3d(2, 2, 0.5);

}

81%,

to {

transform: scale3d(2, 2, 2);

}

.box:nth-child(2) {

animation: box 2.1s -2.1s cubic-bezier(0.2, 0, 0.5, 1) infinite;

}

.face {

position: absolute;

top: 0;

left: 0;

width: 1em;

height: 1em;

box-sizing: border-box;

border: 2px solid #57ff57;

}

.face:nth-child(1) {

transform: translateZ(0.5em);

}

.face:nth-child(2) {

transform: rotateY(90deg) translateZ(0.5em);

}

.face:nth-child(3) {

transform: rotateX(90deg) translateZ(0.5em);

}

.face:nth-child(4) {

transform: rotateY(-90deg) translateZ(0.5em);

}

.face:nth-child(5) {

transform: rotateX(-90deg) translateZ(0.5em);

}

.face:nth-child(6) {

transform: rotateY(180deg) translateZ(0.5em);

}

css中如何写出长方体,CSS3 可伸缩3D长方体相关推荐

CSS中如何制作出小三角形？
css中制作小三角形思路(我是通过边框制作的): 先想好自己想设置方向朝哪边的三角形,这里我制作方向朝上的三角形(其他方向类似) 代码即思路如下: <!DOCTYPE html> < ...
css拖动音乐进度条,利用CSS3实现3D滑块进度条拖动动画特效
特效描述:利用CSS3实现 3D滑块进度条拖动动画特效.利用CSS3实现3D滑块进度条拖动动画特效代码结构 1. HTML代码 Scalable 3D Range Sliders Simple ...
css中的渐变的属性,CSS3 渐变属性（Gradients）-线性渐变(linearGradient)
通过使用 CSS3 渐变(gradients),你可以减少下载的事件和宽带的使用.此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的. 丛本质上来说,既然 bac ...
c++ 命名规则 private_【译】代码中如何写出更有意义的命名
作为一名开发人员,在编码过程中,你总会花很多时间来思考如何正确命名.因为名称无处不在,你需要考虑文件名.类名.方法名和变量名. 虽然我们需要花费很多时间,但是为了更好的命名还是值得的.本文我将向你介绍 ...
【译】代码中如何写出更有意义的命名
作为一名开发人员,在编码过程中,你总会花很多时间来思考如何正确命名.因为名称无处不在,你需要考虑文件名.类名.方法名和变量名. 虽然我们需要花费很多时间,但是为了更好的命名还是值得的.本文我将向你介绍 ...
前端学完HTML+CSS 自己动手写出QQ官网导航栏
HTML+CSS实现QQ头部栏一.找到QQ官网界面在浏览器搜索QQ,找到QQ官网我们做的就是QQ官网的头部内容二.准备 (一).创建一个index.html文件编写html代码 (二).建一个 ...
css中会计算的属性,css3中样式计算属性calc()的使用和总结
calc的介绍在css3样式中有一个类似与函数的计算属性calc(),它主要用于指定元素的长度,无论是border.margin.pading.font-size和width等属性都可以使用calc ...
用最短的CSS样式，写出好的效果
https://xxxgitone.github.io/2017/03/27/shape/ 蒙版文字覆盖一层蒙版,并在蒙版上书写文字.需要2层,从低到上为图片层.蒙版层(上面可写字) <div ...
php中请写出定义变量的两种方法,php定义变量几种
1.定义常量define("CONSTANT", "Hello world."): 常量只能包含标量数据(boolean,integer,float 和 str ...

css中如何写出长方体,CSS3 可伸缩3D长方体

css中如何写出长方体,CSS3 可伸缩3D长方体相关推荐

最新文章

热门文章