布衣人家 发表于 2019-5-18 21:07
老师晚上好！欣赏您的精彩佳作,为您点赞且学习,因故未能及时回复抱歉.遥祝安康！
问好布衣版主，可别叫我老师啊，来向大家学习滴！
谢谢老师给大家带来美的享受和美的陶冶，祝幸福安好！
<style>
#items img{
width:300px;
height: 300px;
position: absolute;overflow:hidden;border-radius:20%;
}
#items img:nth-child(1){
transform: rotateY(0deg) translateZ(240px);
}
#items img:nth-child(2){
transform: rotateY(72deg) translateZ(240px);
}
#items img:nth-child(3){
transform: rotateY(144deg) translateZ(240px);
}
#items img:nth-child(4){
transform: rotateY(216deg) translateZ(240px);
}
#items img:nth-child(5){
transform: rotateY(288deg) translateZ(240px);
}
/*以下是旋转体的有关定义 */
/*id选择器 */
#items{
margin: 50px auto; /*让父元素居中*/
width: 300px; /**/
height: 300px; /* */
/*声明一个3D空间*/
transform-style: preserve-3d; /* */
/*最重要的动画定义来了*/
/*名称animate00 */
/* 一次动画持续时间（秒）， */
/* 动画变化曲线， 本例中 linear 表示匀速变化，
不设定则是两头快中间慢 */
/* 动画次数， 本例中的 infinite表示无限次*/
animation: animate00 60s linear infinite;
position: relative; /* 为内部的图片指定个定位依据*/
}
/*定义一个动画效果，注意动画名animate00 用到了这里*/
/* 这动画定义的含义是，旋转体Y轴方向偏5°，绕X轴方向一周，360° --> 0 ° */
@keyframes animate00 {
from {
transform: rotateY(360deg);
}
to {
transform: rotateY(0deg);
}
}
</style>
<div style="width:500px;height:500px;margin:32px auto;">
<div id="items"> <!-- 旋转体id在这里-->
<!-- 以下是用到的各张图片-->
<img src="http://upload.ouliu.net/i/20190519082558x2jip.jpeg"/>
<img src="http://upload.ouliu.net/i/20190519082558x2jip.jpeg"/>
<img src="http://upload.ouliu.net/i/20190519082558x2jip.jpeg" />
<img src="http://upload.ouliu.net/i/20190519082558x2jip.jpeg"/>
<img src="http://upload.ouliu.net/i/20190519082558x2jip.jpeg"/>
</div>
</div><br><br><br><br><br><br><br>
糊里糊涂 发表于 2019-5-19 08:43
#items img{
width:300px;
...
灰常漂亮，特效美美哒，收藏点赞，请老师喝茶！
http://www.yinhuabbs.cn/data/attachment/forum/201905/18/153931wuo4wkziod0igpg9.jpg
安静听雨2016 发表于 2019-5-18 23:22
谢谢老师给大家带来美的享受和美的陶冶，祝幸福安好！
谢听雨老师赞赏，清茶！
http://www.yinhuabbs.cn/data/attachment/forum/201905/18/153931wuo4wkziod0igpg9.jpg
￡渴々望〤 发表于 2019-5-18 17:21
好像外链不出来了吧
一号大师今天开恩了，可以看到了;P