开智认知写作学第四期 - 第3页 - 『综合教程』 - 瑞客论坛

a973147278 发表于 2020-12-17 17:06

开智认知写作学第四

ryyh 发表于 2020-12-17 18:36

开智认知写作学第四期

dove 发表于 2020-12-17 19:26

开智认知写作学第四期

qingchunsuiying 发表于 2020-12-17 19:35

开智认知写作学第四期

淡蓝恋秋A 发表于 2020-12-17 22:17

666666666666

www415 发表于 2020-12-17 23:14

开智认知写作学第四期

dpblue 发表于 2020-12-17 23:47

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

<style>

   html{
         perspective: 800px;
   }

   .box1{
         /*设置变形时3d效果*/
         transform-style: preserve-3d;
         width: 200px;
         height: 200px;
         margin: 100px auto;
         position: relative;
         transition: all 2s;

         animation: roImg 10s linear infinite;

   }

   .box1>div{
         position: absolute;
         width: 200px;
         height: 200px;
         line-height: 200px;
         text-align: center;
         font-size: 100px;
         opacity: .5;
         transition: all 2s;

   }

   @keyframes roImg {
         from {
            transform: rotateX(0) rotateY(0);
         }

         to {
            transform: rotateX(360deg) rotateY(360deg);
         }
   }

   /*body:hover .box1{*/
   /* !* 设置变形*!*/

   /* transform: rotateY(90deg);*/
   /*}*/

   .box1>div:nth-child(1){
         background-color: yellow;
         transform: rotateY(90deg) translateZ(100px);
         /* 设置变形*/
   }

   .box1>div:nth-child(2){
         background-color: orange;
         transform: rotateY(-90deg) translateZ(100px);

   }

   .box1>div:nth-child(3){
         background-color: red;
         transform: rotateX(90deg) translateZ(100px);

   }

   .box1>div:nth-child(4){
         background-color: skyblue;
         transform: rotateX(-90deg) translateZ(100px);
   }

   .box1>div:nth-child(5){
         background-color: yellowgreen;
         transform: rotateX(0deg) translateZ(100px);
   }

   .box1>div:nth-child(6){
         background-color: chocolate;
         transform: rotateX(180deg) translateZ(100px);
   }

</style>
</head>
<body>

<div class="box1">

<div>
   <img src="cube/1.jpg" alt="">
</div>
<div>
   <img src="cube/2.jpg" alt="">

</div>
<div>
   <img src="cube/3.jpg" alt="">

</div>
<div>
   <img src="cube/4.jpg" alt="">

</div>
<div>
   <img src="cube/5.jpg" alt="">

</div>
<div>
   <img src="cube/6.jpg" alt="">

</div>

</div>

</body>
</html>

delphijjk 发表于 2020-12-18 03:05

mdqh 发表于 2020-12-18 21:20

开智认知写作学

yyj 发表于 2020-12-19 13:20

谢谢分享。。。。。。

页: 1 2 [3] 4 5 6 7

瑞客论坛's Archiver