3d盒子代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>正方體盒子</title><style media="screen">*{margin:0;padding:0;list-style:none;}.cube{position: relative;width:300px;height: 300px;border:1px solid #ccc;margin:100px auto;transition: all 3s;transform-style:preserve-3d;}.cube:hover{transform:rotateX(360deg) rotateY(360deg);}.cube li{width:260px;height: 260px;font-size: 50px;position: absolute;margin:auto;}.cube li:nth-child(1){transform:rotateY(-90deg);transform-origin:left; background:red;}.cube li:nth-child(2){transform:rotateY(90deg);transform-origin: right;background:blue;}.cube li:nth-child(3){transform:rotateX(90deg);transform-origin:top; background:purple;}.cube li:nth-child(4){transform:rotateX(-90deg);transform-origin: bottom;background:yellow;}.cube li:nth-child(5){background:pink;}.cube li:nth-child(6){transform:translateZ(260px);background:orange;}</style></head><body><ul class="cube"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul></body>
</html>
關(guān)于css3? ?的rotate? ?X軸旋轉(zhuǎn)時(shí)? 逆時(shí)針為正? ? ? ? ?Y軸旋轉(zhuǎn)時(shí)? ? ? 順時(shí)針方向?yàn)檎? ? ? ?Z軸旋轉(zhuǎn)時(shí)? 逆時(shí)針方向?yàn)檎?
關(guān)于css3? ?的rotate? ?X軸旋轉(zhuǎn)時(shí)? 逆時(shí)針為正? ? ? ? ?Y軸旋轉(zhuǎn)時(shí)? ? ? 順時(shí)針方向?yàn)檎? ? ? ?Z軸旋轉(zhuǎn)時(shí)? 逆時(shí)針方向?yàn)檎?
總結(jié)
- 上一篇： 计算机控制系统硬件组成实验报告,计算机硬
- 下一篇： 测试中的数据统计分析的验证：python