<!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
最新推荐文章于 2024-06-28 22:48:51 发布
本文详细探讨了CSS如何实现3D方框效果,包括使用transform属性创建旋转、透视和转换,以及盒模型在3D空间中的应用。通过实例代码,读者将能够掌握创建动态、立体感的网页元素技巧。
摘要由CSDN通过智能技术生成