文章目录
一.CSS3实现旋转正方体
效果图
<!DOCTYPE html>
<!-- 正方体旋转 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>正方体旋转</title>
<style>
*{
margin: 0;padding: 0;}
.box{
width: 300px;height: 300px;margin: 30px auto;border: 1px solid black;perspective: 200px;perspective-origin:top;}/*perpspective设置景深,perspective-orign设置观察的基点*/
.box ul{
list-style: none;width: 100px;height: 100px;margin: 100px;position: relative;transition: 2s;transform-style:preserve-3d;transform-origin: center center -50px;}/*transform-style: preserve-3d显示3d效果 perspective设置景深也是必不可少 transform-origin设置旋转的基点*/
.box ul li{
width: 100px;height: 100px;position: absolute;font-size: 30px;text-align: center;line-height: 100px;opacity: 0.3;/*backface-visibility: hidden;*/}
.box ul li:nth-of-type(1){
background: red;left: 0;top: 0;}
.box ul li:nth-of-type(2){
background: blue;left: 100px;top: 0;transform-origin: left;transform: rotateY(90deg);}/*2号以左边为基点,向右旋转90度(正)*/
.box ul li:nth-of-type(3){
background