<!DOCTYPE html>
<html>
<head lang="zh">
<meta charset="UTF-8">
<title>方框1-作业1</title>
<style type="text/css">
body{
perspective:1500px;
}
.wrap{
width:100px;
height:100px;
/*border:1px solid red;*/
margin:200px auto;
transform-style: preserve-3d;
position: relative;
transition:20s;
}
.wrap:hover{
transform:rotateY(720deg) /*rotateZ(3600deg)rotateX(360deg)*/;
}
.wrap div{
width:180px;
height:180px;
border:1px solid gold;
backface-visibility: hidden;
text-align:center;
line-height:180px;
position: absolute;
top:0;
left:0;
transition:3s;
}
.con1{
background:red;
transform:rotateY(0deg) translateZ(400px);
}
.con2{
background:orange;
transform:rotateY(30deg) translateZ(400px);
}
.con3{
background:green;
transform:rotateY(60deg) translateZ(400px);
}
.con4
Css样式--方框3d
最新推荐文章于 2022-09-29 19:18:53 发布