首先介绍几个实现3D效果的CSS3属性:
rotateY、translateZ
这两个transform属性值是实现3D效果比较常用的,首先要记清楚变换的坐标轴,X-水平、Y-竖直、Z垂直屏幕。
perspective
该属性为定义3D变换的元素与视图的距离,也就是透视距离。该属性不是添加在变换的元素上,而是添加到视图元素(变换元素的父元素)上。
在未定义该属性的情况下,translateZ 并不会生效,因为没有透视距离。若你的元素沿Z轴的移动值并不是基于百分比的情况下,只需保证 prespective 值大于 translateZ 值即可。
反转
代码如下
.xiayige{
margin-left:650px;
text-decoration: none;
}
.box{
width: 300px;
height: 300px;
margin:200px auto;
perspective:800px;
}
.box1{
width:300px;
height:300px;
position:relative;
transform-style:preserve-3d;
transition:transform 1s;
}
.box2{
backface-visibility:hidden;
width:300px;
height:300px;
position:absolute;
background:url(3d.jpg);
background-size:650px 300px;February
transform:rotateY(180deg);
}
.box3{
backface-visibility:hidden;
width:300px;
height:300px;
position:absolute;
background:url(tuan.png);
background-size:650px 300px;
transform:rotateY(180deg);
}
.box1:hover{
transform:rotateY(180deg);
}
</style>
<body>
<a href="lifang.html"; class="xiayige">下一个</a>
<div class="box">
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
</div>
</body>
复制代码
效果图
立方体
代码如下
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.xiayige{
margin-left:650px;
text-decoration: none;
}
.box{
margin:150px auto;
width:300px;
height:300px;
perspective:800px;
transform-style:preserve-3d;
}
.box1{
transform-style:preserve-3d;
width:300px;
height:300px;
position: relative;
animation: lifang 8s infinite linear;
}
.tu{
width:300px;
height:300px;
position:absolute;
text-align:center;
font-size:200px;
line-height:300px;
}
.top{
transform:rotateX(90deg) translateZ(150px);
background:#f7fa59;
background:url(3d.jpg);
background-size:300px 300px;
}
.bottom{
transform:rotateX(-90deg) translateZ(150px);
background:#e359fa;
background:url(3d.jpg);
background-size:300px 300px;
}
.left{
transform:rotateY(-90deg) translateZ(150px);
background:#595ffa;
background:url(3d.jpg);
background-size:300px 300px;
}
.right{
transform:rotateY(90deg) translateZ(150px);
background:#79fa59;
background:url(3d.jpg);
background-size:300px 300px;
}
.qian{
transform:translateZ(150px);
background:#59e7fa;
background:url(3d.jpg);
background-size:300px 300px;
}
.hou{
transform:rotateY(-180deg) translateZ(150px);
background:#fa5959;
background:url(3d.jpg);
background-size:300px 300px;
}
@keyframes lifang{
0%{
transform: rotateY(0deg);
}
50%{
transform: rotateY(360deg);
}
60%{
transform: rotateX(0deg);
}
100%{
transform: rotateX(360deg);
}
}
</style>
</head>
<body>
<a href="xuanzhuanmuma.html"; class="xiayige">下一个</a>
<div class="box">
<div class="box1">
<div class="tu top"></div>
<div class="tu bottom"></div>
<div class="tu left"></div>
<div class="tu right"></div>
<div class="tu qian"></div>
<div class="tu hou"></div>
</div>
</div>
</body>
</html>
复制代码
效果图
由于文件太大没法上传图片在此忽略。
旋转木马
代码如下
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
.box{
margin:200px auto;
perspective:1000px;
}
.tupian{
margin: 0 auto;
background:url(3d.jpg);
position: relative;
width: 200px;
height: 100px;
transform: rotateX(-8deg);
transform-style: preserve-3d;
animation: rot linear 6s infinite;
}
.tupian div{
position: absolute;
width: 200px;
height: 100px;
}
.tupian div:nth-child(1){
background:url(3d.jpg);
transform: rotateY(0deg) translateZ(350px);
}
.tupian div:nth-child(2){
background:url(3d.jpg);
transform: rotateY(60deg) translateZ(350px);
}
.tupian div:nth-child(3){
background:url(3d.jpg);
transform: rotateY(120deg) translateZ(350px);
}
.tupian div:nth-child(4){
background:url(3d.jpg);
transform: rotateY(180deg) translateZ(350px);
}
.tupian div:nth-child(5){
background:url(3d.jpg);
transform: rotateY(240deg) translateZ(350px);
}
.tupian div:nth-child(6){
background:url(3d.jpg);
transform: rotateY(300deg) translateZ(350px);
}
.tupian div:nth-child(7){
background:url(3d.jpg);
transform: rotateY(360deg) translateZ(350px);
}
@keyframes rot{
from{transform: rotateX(-8deg) rotateY(0deg);}
to{transform: rotateX(-8deg) rotateY(-360deg);}
}
</style>
</head>
<body>
<div class="box">
<div class="tupian">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
复制代码
效果图
由于文件太大没法上传图片在此忽略。
以上就是我个人对于 css 3d 的一些理解 如有不足之处 请大家评论留言多多指教。