3D旋转立方体案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS 3D轉換</title><style>body {margin: 0;padding: 0;background-color: #F7F7F7;}.box {width: 100px;height: 100px;text-align: center;line-height: 100px;font-size: 24px;margin: 100px auto;position: relative;transform: rotateY(30deg) rotateX(-30deg);transform-style: preserve-3d;/*perspective:200px;*/animation: rotate 4s linear infinite;}.box div{width: 200px;height: 200px;position: absolute;left: 0;top: 0;opacity: 0.6;}.front{transform: translateZ(100px);background: pink;}.back{transform: translateZ(-100px) rotateY(180deg);background: green;}.left{transform: translateX(-100px) rotateY(-90deg);background: yellowgreen;}.right{transform: translateX(100px) rotateY(90deg);background: blueviolet;}.top{transform: translateY(-100px) rotateX(90deg);background: blue;}.bottom{transform: translateY(100px) rotateX(-90deg);background: red;}@keyframes rotate {from{transform: rotateY(30deg) rotateX(-30deg);}to{transform: rotateY(390deg) rotateX(-30deg);}}</style>
</head>
<body><div class="box"><div class="front">front</div><div class="back">back</div><div class="left">left</div><div class="right">right</div><div class="top">top</div><div class="bottom">bottom</div></div>
</body>
</html>
?
轉載于:https://www.cnblogs.com/lsy0403/p/5935166.html
總結
- 上一篇： 进程环境之环境表【转】
- 下一篇： bootstrap 解决弹出窗口(mod