利用CSS3制作简单的3d半透明立方体图片实例代码-tutorial css-php.cn

利用CSS3制作简单的3d半透明立方体图片实例代码

高洛峰

Lepaskan： 2017-03-28 09:54:10

asal

2401 orang telah melayarinya

这篇文章主要给大家介绍了利用CSS3制作简单的3d半透明立方体图片展示的相关资料，文中给出了完整的示例代码，对大家的理解和学习具有一定的参考价值，需要的朋友们下面来一起看看吧。

效果图如下：

利用CSS3制作简单的3d半透明立方体图片实例代码

示例代码：

<html>
 <head>
 <title> new document </title>
 <meta name="generator" content="editplus" />
 <meta name="author" content="" />
 <meta name="keywords" content="" />
 <meta name="description" content="" />
 <meta charset="utf-8"/>
 <style type="text/css">
 
//css部分
html{
    font-size:62.5%;
    }
    img{
    width:300px;
    height:300px;
    }
 #stage{
 
//搭建一个舞台
margin-top:200px;
    margin-left:auto;
    margin-right:auto;
    width:300px;
    height:300px;
    perspective:1200px;
    font-size:5em;
    font-weight:bold;
    color:#cc00ff;
 
}
 .cube{
 
//cube是正方体
position:relative;
    transform:rotateX(-45deg) rotateY(45deg);
    transform-style:preserve-3d;
    transition: all .6s;
 }
 .side{
    color:blue;
    text-align:center;
    width:300px;
    height:300px;
    line-height:300px;
    position:absolute;
    background:#cc66ff;
    opacity:0.5;
    border:1px solid rgba(117,4,24,0.5);
 
}
 
//.front到.bottom是6个面分别进行旋转，构建出正方体的整形
.front{
    transform:translateZ(150px);
    }
    .back{
    transform:rotateY(180deg) translateZ(150px);
    }
    .left{
    transform:rotateY(-90deg) translateZ(150px);
    }
    .right{
    transform:rotateY(90deg) translateZ(150px);
    }
    .top{
    transform:rotateX(90deg) translateZ(150px);
    }
    .bottom{
    transform:rotatex(-90deg) translateZ(150px);
    }
    #stage:hover .cube{
 
//设置鼠标移上正方体时是否需要过渡效果以及过渡效果开始和结束的时间和速度
transform:rotateX(-45deg) rotateY(225deg);
    transition:transform .6s;
    }
 </style>
 </head>
 
 
<body>
    <p id="stage">
    <p class="cube">
    <p class="side front"><img src="6.gif" alt="" /></p>
    <p class="side back"><img src="2.jpg" alt="" /></p>
    <p class="side left"><img src="3.jpg" alt="" /></p>
    <p class="side right"><img src="4.jpg" alt="" /></p>
    <p class="side top"><img src="5.jpg" alt="" /></p>
    <p class="side bottom"><img src="1.jpg" alt="" /></p>
    </p>
    </p>
 
 </body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci 利用CSS3制作简单的3d半透明立方体图片实例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!