CSS简单魔方效果
首先我们在body里面下我们需要的标签元素
<body>
<!--这里也可以用div写 -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
写好后我们在style标签里写我们所需要的的样式
先给ul设置我们所需要的样式让它相对页面居中
<style>
ul {
width: 250px;
height: 250px;
transform-style: preserve-3d;//3d效果
position: relative;
/*在这里给父级设置相对定位是为了后面给li设置
绝对定位时让li以ul的左顶点进行位置偏移*/
margin: 300px auto;
padding: 0; //这里我们给ul设置内边距为0
}
</style>
给父级设置好样式后我们现在来给li设置样式,因为在鼠标还没有触碰到是只是一张图片,所以这里我们要给li背景图片,这里这里我是写在标签选择器里的,刚开始每个li都堆叠在一起所以只会看到一张图片。
<style>
li {
position: absolute;
width: 250px;
height: 250px;
list-style: none;//去除li前面的符号
transform-origin: center center;//旋转的中心点
background-image: url(web/9.jpg);
background-size: 100