我爱撸码，撸码使我觉得开心！
大伙儿好，我是Counter，本章新浪微博关键运用了CSS3的1些新特点，
关键用到重要帧来使三d图型健身运动起来，涉及到到了1些抽象性的观念，立体式的想像。
先给大伙儿看看进行的实际效果，编码也并不是很难，每行编码都给到了详尽注解，纯CSS，沒有用到JS，CSS3非常好。
实际效果以下:
每行基础都有注解，就不反复说了，编码以下:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF⑻">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>三d转动</title>
<style>
/* 给最外层父级设定景深，让里边的元素有立体式的室内空间，而且设定宽高 */
.wrapper {
/* 景深600像素 */
perspective: 500px;
/* 设定margin间距上面100px，上下自融入，下面0 */
margin: 100px auto 0;
width: 200px;
height: 200px;
/* border: 1px solid black; */
}
.box {
/* 设定相对性精准定位好让子元素相对自身精准定位 */
position: relative;
/* 给item设定保存三d实际效果，假如沒有设定里边的元素将不容易展现三d实际效果 */
transform-style: preserve⑶d;
width: 200px;
height: 200px;
/* move为设定的重要帧，健身运动8秒，匀速健身运动，无尽次（各个主要参数意味着的含意） */
animation: move 8s linear infinite;
}
/* 挑选全部开始带有item的元素，使其所有精准定位到父级所属的部位 */
div[class^="item"] {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
/* 使文字上下对齐 */
text-align: center;
/* 使文字左右对齐 */
line-height: 200px;
}
/* 立方体有6面，每一个item1~6意味着每面，此时里边的item1~6具备3条轴，x，y，z */
/* x轴就是你电脑上显示屏宽度的那条轴，从左到右。y轴就是你电脑上显示屏高宽比的那条轴，从上到下。z轴就是你双眼竖直看电脑上显示屏的那条轴，方位从电脑上显示屏到你的双眼*/
/* 设定第1面 */
.item1 {
/* 沿z轴向你双眼方位挪动100px */
transform: translateZ(100px);
/* 设定情况色调，最终1个主要参数为全透明度设定为0.6 */
background-color: rgba(255, 0, 0, 0.6);
}
/* 设定第2面 */
.item2 {
/* 沿z轴向里挪动100px即为⑴00px */
transform: translateZ(⑴00px);
background-color: rgba(72, 42, 245, 0.6);
}
/* 设定第3面 */
.item3 {
/* 沿x轴转动90度，随后再向z轴挪动100px（deg在这里表明度的意思） */
transform: rotateX(90deg) translateZ(100px);
background-color: rgba(217, 230, 36, 0.6);
}
/* 设定第4面 */
.item4 {
/* 沿x轴转动90度，随后再向z轴挪动⑴00px */
transform: rotateX(90deg) translateZ(⑴00px);
background-color: rgba(58, 7, 51, 0.6);
}
/* 设定第5面 */
.item5 {
/* 沿y轴转动90度，随后再向z轴挪动⑴00px */
transform: rotateY(90deg) translateZ(⑴00px);
background-color: rgba(241, 142, 75, 0.6);
}
/* 设定第6面 */
.item6 {
/* 沿y轴转动90度，随后向z轴挪动100px */
transform: rotateY(90deg) translateZ(100px);
background-color: rgba(125, 178, 238, 0.6);
}
/* 设定重要帧让box器皿转动起来，各自沿x，y，z轴从0转动360度 */
@keyframes move {
0% {
transform: rotateX(0) rotateY(0) rotateZ(0);
}
100% {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
</div>
</div>
</body>
</html>
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。
Copyright © 2002-2020 建站平台有哪些_如何建设网站_免费自助建站_如何建立一个网站_网站建站的 版权所有 （网站地图） 粤ICP备10235580号