老师下午好！欣赏老师的佳作,为你点赞,遥祝春安！
绿地水池 发表于 2019-3-26 10:22
那你也得去看看，签收一下啊。
不好意思，没有看懂。
<br>
<style>
/* 这帖旋转体的id 为 items */
/* 以下是定义所有图片的 */
#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选择器 id不能重复命名 ， 本例中 id 为 items*/
#items{
margin: 50px auto; /*让父元素居中*/
width: 300px; /* 旋转体宽度， 和单张图片相等 */
height: 300px; /*旋转体高度， 和单张图片相等 */
/*声明一个3D空间*/
transform-style: preserve-3d; /* 这句很重要，显示立体效果*/
/*最重要的动画定义来了*/
/*名称animate00这个必须有，随自己心意起个名称*/
/* 一次动画持续时间（秒）， 本例中是 120秒 */
/* 动画变化曲线， 本例中 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://www.yinhuabbs.cn/data/attachment/forum/201812/11/203050n9y59dzx85xxx1dj.jpg"/>
<img src="http://www.yinhuabbs.cn/data/attachment/forum/201812/11/203050n9y59dzx85xxx1dj.jpg"/>
<img src="http://www.yinhuabbs.cn/data/attachment/forum/201812/11/203050n9y59dzx85xxx1dj.jpg"/>
<img src="http://www.yinhuabbs.cn/data/attachment/forum/201812/11/203050n9y59dzx85xxx1dj.jpg"/>
<img src="http://www.yinhuabbs.cn/data/attachment/forum/201812/11/203050n9y59dzx85xxx1dj.jpg"/>
</div>
</div>
糊里糊涂 发表于 2019-3-27 08:57
不好意思，没有看懂。
我给你的帖子题过一首诗。希望你能喜欢。;P
布衣人家 发表于 2019-3-26 13:25
老师下午好！欣赏老师的佳作,为你点赞,遥祝春安！
http://www.yinhuabbs.cn/data/attachment/forum/201903/21/165223a09nl70y5qs0954m.gif