CSS3之正方体旋转

html代码

<ul><li>你</li><li>真</li><li>帅</li><li>啊</li><li>!</li><li>帅</li>
</ul>

css代码

// 给子元素添加绝对定位 以便能进行平移 旋转
ul > li {width: 400px;height: 400px;border: 1px solid black;position: absolute;list-style: none;line-height: 400px;font-size: 35px;
}
// 給父元素添加相对定位
ul {position: relative;
//给父元素添加效果透视-webkit-transform-style: preserve-3d;
}
ul:hover {transform: rotateX(360deg) rotateY(360deg);transition: all 10s;cursor: pointer;
}
li:nth-child(1) {background-color: antiquewhite;transform: translateZ(200px);
}
li:nth-child(2) {background-color: aqua;transform: rotateX(90deg) translateZ(200px);
}
li:nth-child(3) {background-color: aquamarine;transform: rotateX(180deg) translateZ(200px);
}
li:nth-child(4) {background-color: bisque;transform: rotateX(270deg) translateZ(200px);
}
li:nth-child(5) {background-color: blueviolet;transform: rotateY(90deg) translateZ(200px);
}
li:nth-child(6) {background-color: yellowgreen;transform: rotateY(-90deg) translateZ(200px);
}

效果

CSS3之正方体旋转相关推荐

css3制作正方体,利用CSS3的3D效果制作正方体
学会用css3的3d效果制作一个正方体,有助于增强我们对3d场景的旋转和位移属性的理解.下面的动态图就是利用3d旋转位移,结合动画效果制作的.感兴趣的同学可以在完成正方体的制作基础上,再去探究一下添加 ...
CSS3 简单3D旋转画册
CSS3 简单3D旋转画册上次我们简单介绍了c3的一些基础知识,我们今天来做一个小练习: 这个简单的案例是3D的一个旋转画册,那么上面是我们的一个效果图,因为不能够传视屏所以就暂时只能够截图来看一下 ...
css对称旋转,CSS3 transform平面旋转
CSS3 transform平面旋转 1.translate(x,y) 设置盒子位移 2.scale(x,y) 设置盒子缩放 3.rotate(deg) 设置盒子旋转 4.skew(x-angle,y ...
如何用css3实现简单旋转的风车
如何用css3实现简单旋转的风车在DW中想要实现旋转的风车就要使用关键帧keyframes来设置旋转,其实也没什么难度的.先设置它的样式,然后要用定位把它放到合适的位置就可以了. HTML的代码如下 ...
html立方体旋转展开,css3技术设计立方体旋转发光效果动图
CSS3 3D立方体旋转发光动画特效 body { margin: 0; overflow: hidden; width: 100vw; height: 100vh; background: #222 ...
css动画效果制作正方体旋转相册
以下代码利用css动画效果制作了一个旋转的正方体,给正方体六个面放置好图片就可以当一个炫酷有趣的正方体旋转相框啦!可以将女朋友的照片放进去哦,赶快去试试,给女朋友一个惊喜吧! 下面没有放入背景建议大家 ...
html头像动画,用CSS3实现头像旋转效动画
这次给大家带来用CSS3实现头像旋转效动画,用CSS3实现头像旋转效动画的注意事项有哪些,下面就是实战案例,一起来看一下. 鼠标未放上效果: 鼠标放上之后旋转效果: transition: all 2 ...
css3动画图片旋转绕轴,css3图片旋转如何实现？css3实现图片旋转动画效果的方法...
在网页中,我们经常可以看到一张图片在旋转,这样的图片旋转是怎么来实现的呢?本篇文章就来为你介绍一下关于css3实现图片旋转动画效果的方法. 实现css3中图片的旋转可以使用可以使用 -webkit-a ...
CSS3动画（旋转）
开发工具与关键技术:CSS3动画(旋转) 作者:刘鑫婷撰写时间:2019年1月17日下面我们来看一个简单的旋转动画,HTML代码的截图: 在css样式中给每个div设置具体的宽度.高度.位置(定位 ...

CSS3之正方体旋转

CSS3之正方体旋转相关推荐

最新文章

热门文章