當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

纯手写的css3正方体旋转效果

發布時間：2023/11/29 编程问答 44 豆豆

生活随笔收集整理的這篇文章主要介紹了纯手写的css3正方体旋转效果小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>css3旋轉立方體效果</title><style type="text/css">*{margin: 0;padding: 0;}.box{width: 400px;height: 400px;border: 1px solid #000;margin: 30px auto;perspective: 1200px;/*設置元素被查看位置的視圖----景深看物體的遠近數值大越遠*/-webkit-perspective: 1200px; /* Safari 和 Chrome */}.box ul{width: 300px;height: 300px;border: 1px solid #000000;position: relative;transform-style: preserve-3d; /*設置3d場景*/-webkit-transform-style: preserve-3d; /* Safari 和 Chrome */animation: move 2s infinite linear; /*運動時間代表動畫循環快慢*/transform-origin: center center 150px; /*第三個需要給具體數值*/-webkit-transform-origin:center center 150px;margin: 50px;}.box ul li{width: 300px;height: 300px;line-height: 300px;position: absolute;font-size: 50px;transition: all .5s;text-align: center;list-style: none;}.box ul li:nth-of-type(1){background: red;opacity: 0.5;}.box ul li:nth-of-type(2){background: blue;opacity: 0.5;transform: translateX(300px) rotateY(-90deg);-webkit-transform: translateX(300px) rotateY(-90deg); /* Safari 和 Chrome */transform-origin: left;-webkit-transform-origin:left;}.box ul li:nth-of-type(3){background: blueviolet;opacity: 0.5;transform: translateX(-300px) rotateY(90deg);-webkit-transform: translateX(-300px) rotateY(90deg);transform-origin: right;-webkit-transform-origin:right;}.box ul li:nth-of-type(4){background: brown;opacity: 0.5;transform: translateY(-300px) rotateX(-90deg);-webkit-transform: translateY(-300px) rotateX(-90deg);transform-origin: bottom;-webkit-transform-origin:bottom;}.box ul li:nth-of-type(5){background: deeppink;opacity: 0.5;transform: translateY(300px) rotateX(90deg);-webkit-transform: translateY(300px) rotateX(90deg);transform-origin: top;-webkit-transform-origin:top;}.box ul li:nth-of-type(6){background: yellow;opacity: 0.5;transform: translateZ(300px);-webkit-transform: translateZ(300px);}@keyframes move{from{transform: rotateY(0deg);}to{transform: rotateY(360deg);}}@-webkit-keyframes move{from{-webkit-transform: rotateY(0deg);}to{-webkit-transform: rotateY(360deg);}}</style></head><body><div class="box"><ul><li>最騷的css3</li><li>最騷的css3</li><li>最騷的css3</li><li>最騷的css3</li><li>最騷的css3</li><li>最騷的css3</li></ul></div></body> </html>

轉載于:https://www.cnblogs.com/lhl66/p/8975796.html

總結

以上是生活随笔為你收集整理的纯手写的css3正方体旋转效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。