你可是我们这里的制图专家。谢谢。 绿地水池 发表于 2019-4-17 17:18
你可是我们这里的制图专家。谢谢。
<style>
/* 这帖旋转体的id 为 items */
/* 以下是定义所有图片的 */
#items img{
width:300px; /* 图片宽度 */
height: 300px; /* 图片高度 */
position: absolute;
/*---------下面几条不是必要的， 只是修饰图片所用 -------*/
overflow:hidden; /* 这条及下面一条是为使图片圆角 */
border-radius:16px;
border:4px blue inset; /* 图片边框设置 */
opacity:0.9; /* 图片透明度 */
}
/*以下为逐一定义图片偏转角度及距中心的距离 */
/*本例中用到8张图片，每张图片逐一偏转 360 / 8 = 45 度 (rotateX)*/
/*距中心距离 = 图片高度 ÷ 2 ÷ tan(每一图片偏转角度 / 2) */
/*本例中： 300 ÷ 2 ÷ tan(45 ÷ 2) ≈ 362.132 */
/* 小于计算值图片会挤在一起，略大于是为了使图片间有个小间隔*/
#items img:nth-child(1){
transform: rotateX(0deg)translateZ(375px);
}
#items img:nth-child(2){
transform: rotateX(45deg) translateZ(375px);
}
#items img:nth-child(3){
transform: rotateX(90deg) translateZ(375px);
}
#items img:nth-child(4){
transform: rotateX(135deg) translateZ(375px);
}
#items img:nth-child(5){
transform: rotateX(180deg) translateZ(375px);
}
#items img:nth-child(6){
transform: rotateX(225deg) translateZ(375px);
}
#items img:nth-child(7){
transform: rotateX(270deg) translateZ(375px);
}
#items img:nth-child(8){
transform: rotateX(315deg) translateZ(375px);
}
/*以下是旋转体的有关定义 */
/*id选择器 id不能重复命名 ， 本例中 id 为 items*/
#items{
margin: 300px auto; /*让父元素居中*/
width: 300px; /* 旋转体宽度， 和单张图片相等 */
height: 300px; /*旋转体高度， 和单张图片相等 */
/*声明一个3D空间*/
transform-style: preserve-3d; /* 这句很重要，显示立体效果*/
transform: rotateY(5deg); /* 略微偏转一点以免前后重叠*/
/*最重要的动画定义来了*/
/*名称animate00这个必须有，随自己心意起个名称*/
/* 一次动画持续时间（秒）， 本例中是 120秒 */
/* 动画变化曲线， 本例中 linear 表示匀速变化，
不设定则是两头快中间慢 */
/* 动画次数， 本例中的 infinite表示无限次*/
animation: animate00 120s linear infinite;
position: relative; /* 为内部的图片指定个定位依据*/
/* ---- 下面的不重要， 根据自己需要设定， 与动画无关*/
/*left:0px;top:50px;
margin-bottom:80px;*/
}
/*定义一个动画效果，注意动画名animate00 用到了这里*/
/* 这动画定义的含义是，旋转体Y轴方向偏5°，绕X轴方向一周，360° --> 0 ° */
@keyframes animate00 {
from {
transform: rotateY(5deg) rotateX(360deg);
}
to {
transform: rotateY(5deg) rotateX(0deg);
}
}
</style>
<div style="width:500px;height:900px;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"/>
<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-4-18 08:47
欣赏老师精彩动漫制作，点赞。
http://www.yinhuabbs.cn/data/attachment/forum/201903/21/165223a09nl70y5qs0954m.gif
糊里糊涂 发表于 2019-4-18 08:44
/* 这帖旋转体的id 为 items */
/* 以下是定义所有图片的 */
...
问好糊里糊涂朋友！
页:
1
[2]