前言：
如今小伙伴们对“css旋转180度怎么转”大概比较关切，各位老铁们都想要分析一些“css旋转180度怎么转”的相关知识。那么小编在网上收集了一些有关“css旋转180度怎么转””的相关内容，希望大家能喜欢，我们快快来了解一下吧！首先来看具体的效果：
旋转立方体
主要使用到我们在CSS中学到的一下知识：
视距perspective3d立体图形transform-style:preserve-3d;旋转transform: rotateY(180deg);Z轴平移transform: translateZ(800px);动画animation
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>旋转的立方体</title> <style> *{ margin:0; padding: 0; } html{ perspective: 800px; } .box{ height: 200px; width: 200px; margin: 200px auto; background-color: aquamarine; transform-style: preserve-3d; animation: rotate 20s infinite linear; } .box1,.box2,.box3,.box4,.box5,.box6{ height: 200px; width: 200px; opacity: 0.7; position: absolute; } .box1{ background-color: red; transform: rotateY(90deg) translateZ(128px); } .box2{ background-color: blue; transform: rotateY(-90deg) translateZ(128px); } .box3{ background-color: yellow; transform: rotateX(90deg) translateZ(128px); } .box4{ background-color: yellowgreen; transform: rotateX(-90deg) translateZ(128px); } .box5{ background-color: green; transform: rotateY(180deg) translateZ(128px); } .box6{ background-color: purple; transform: rotateY(0deg) translateZ(128px); } @keyframes rotate { form{ transform:rotateX(0) rotateZ(0) } to{ transform:rotateX(1turn) rotateZ(1turn) } </style></head><body> <div class="box"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div> <div class="box6"></div> </div></body></html> 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #css旋转180度怎么转
