利用3D转换实现旋转木马

该案例就是对3D转换的利用，话不多说直接上代码

案例效果

案例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>旋转木马</title><style>*{margin: 0;padding: 0;}body{perspective:1500px;}.box{position: relative;width: 300px;height: 200px;margin: 100px auto;transform-style: preserve-3d;animation: dog 10s linear infinite;background: url(./img/images/pig.jpg);}.box:hover{animation-play-state: paused;}@keyframes dog{0%{transform: rotateY(0);}100%{transform: rotateY(360deg);}}.box div{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(./img/images/dog.jpg);}.box div:nth-child(1){transform: translateZ(300px);}.box div:nth-child(2){transform:  rotateY(60deg) translateZ(300px);}.box div:nth-child(3){transform:  rotateY(120deg) translateZ(300px);}.box div:nth-child(4){transform:  rotateY(180deg) translateZ(300px);}.box div:nth-child(5){transform:  rotateY(240deg) translateZ(300px);}.box div:nth-child(6){transform:  rotateY(300deg) translateZ(300px);}</style>
</head>
<body><div class="box"><div></div><div></div><div></div><div></div><div></div><div></div></div>
</body>
</html>

利用3D转换实现旋转木马相关推荐

CSS3 3D转换和旋转木马案例
文章目录前言有什么特点一.三维坐标系 3D转换二.3D移动translate3d 三.透视perspective 四.translateZ 五.3D旋转rotate3d 六. 3D呈现tran ...
CSS3 中3D转换--旋转正方体，滚动照片墙的写法
首先给父元素加两个属性,把父元素变成3D空间. (1)transform-style:preserve-3d; (观察的场所 3D空间) (2)perspective:1000px;(近大远小–景深p ...
HTML+CSS中的3D转换translate/rotate 旋转木马/翻转盒子/3D导航栏
前面我们已经介绍过了2D转换,那么我们即将学习的3D转换又是什么呢,它跟2D转换有什么不同呢? 在我们日常生活的环境就是3D的,我们多看到的物体也都是3D的,而我们拍的照片就是3D物体在2D平面中呈现 ...
CSS3新特性——新增选择器，2D/3D转换，动画
CSS3新特性--新增选择器,2D/3D转换,动画欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页 ...
CSS3 2D和3D转换 Transform
Transform 适应于对任一DOM元素的2D或3D转换,这些转换效果有:旋转(rotate).拉伸(scale).平移(move).倾斜(skew)等,利用Transform和javascript ...
十五、CSS 3新特性详解（三）——3D转换(位移、旋转、呈现)、透视perspective、旋转rotateX、Y、Z、呈现transform-style
HTML5 第三天一. 认识 3D 转换 3D 的特点近大远小物体和面遮挡不可见三维坐标系 x 轴:水平向右 – 注意:x 轴右边是正值,左边是负值 y 轴:垂直向下 – 注意:y 轴下面是正 ...
论文翻译——Rapid 2D-to-3D conversion——快速2D到3D转换
目前想做一个关于2D转3D的项目,由于国内资料比较少而且大部分都是基于国外的研究资料优化而来,所以想翻译翻译国外的论文,强化自己的理解,同时方便他人,英文水平有限,尽量做到"信达雅" ...
2D转换动画 3D转换
好烦好烦好烦好烦好烦好烦好烦好烦好烦好困好困好困好困好困好困 transform:sacle(x,y) 缩放缩放 x y放倍数宽度,高度注意其中x y用逗号分隔可以是小数不会影响其他盒子鼠 ...
六、CSS 速览 —— 平面转换、3D转换、动画
平面转换.3D转换.动画字体图标 iconfont 阿里图标库从图标库引用素材平面转换 transition: all 1s; 设置元素变换动画 transform: translate(px, ...

利用3D转换实现旋转木马

案例效果

案例代码

利用3D转换实现旋转木马相关推荐

最新文章

热门文章