旋转木马--利用html5和css3制作好看的图片3D旋转效果

旋转木马–利用html5和css3制作好看的图片3D旋转效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{perspective: 1000px;//在父级元素上施加透视效果,更具有3D效果}section{width: 300px;height: 200px;margin: 150px auto;//把图片移动到页面中间位置position: relative;transform-style: preserve-3d;//让子元素保持3D效果animation: rotate 10s linear infinite;//动画 使图片旋转起来background: url(02.jpg) no-repeat top center;//引入位于同一路径下的图片background-size: 300px 170px;//修改图片大小}section:hover{animation-play-state: paused;//当鼠标移到图片上使，停止动画转动}@keyframes rotate{//设置动画初末位置0%{transform: rotateY(0);}100%{transform: rotateY(360deg);}}section div{ //引入位于中间的图片width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: url(01.jpg) no-repeat;background-size: 240px;}//通过Html新增伪类选择器，选择各图片并进行位置修改section div:nth-child(1){transform: translateZ(300px);}section div:nth-child(2){ transform:rotateY(60deg) translateZ(300px);}section div:nth-child(3){transform:rotateY(120deg) translateZ(300px);}section div:nth-child(4){transform:rotateY(180deg) translateZ(300px);}section div:nth-child(5){transform:rotateY(240deg) translateZ(300px);}section div:nth-child(6){transform:rotateY(300deg) translateZ(300px);}</style>
</head>
<body><section><div></div><div></div><div></div><div></div><div></div><div></div></section>
</body>
</html>

关于图片位置的判断，只要记住translate关于x,y,z轴怎样旋转，就可以通过角度设计出来

旋转木马--利用html5和css3制作好看的图片3D旋转效果相关推荐

html5 纵向分割线,html5和css3制作不规则的网页背景分割线
这是一款实用的.效果炫酷的html5和css3制作不规则的网页背景分割线网页模板. EXAMPLE 1 下面来看一下第一个demo的制作流程. html结构:实用一个section来包裹所有的内容,其 ...
纯CSS3制作炫酷的3D相册
纯CSS3制作炫酷的3D相册整体效果如下所示: 整体代码如下所示: html中的代码 <!DOCTYPE html> <html lang="en"> & ...
html5 鼠标旋转动画效果,CSS3鼠标滑过图片3D翻转动画特效
这是一款效果非常炫酷的CSS3鼠标滑过图片3D翻转动画特效.该特效基于Bootstrap网格系统来布局,通过简单的CSS3代码,在鼠标滑过图片时对图片进行3D翻转,效果非常的酷. 使用方法 HTML结 ...
html5制作3d效果图,一篇文章教会你利用html5和css3实现3D立方体效果图
[一.项目背景] 随着HTML5 CSS3的出现和发展,使得我们的网页可以实现更加复杂的效果,也使得我们的浏览体验更加丰富,所以今天我们将制作一个正方体的3D效果. [二.项目分析] 想要利用CSS3 ...
html5把六张图片做成立方体,一篇文章教会你利用html5和css3实现3D立方体效果图...
[一.项目背景] 随着HTML5 CSS3的出现和发展,使得我们的网页可以实现更加复杂的效果,也使得我们的浏览体验更加丰富,所以今天我们将制作一个正方体的3D效果. [二.项目分析] 想要利用CSS3 ...
用html和css制作钟表,使用HTML5和CSS3制作简单的钟表
利用html5,css实现钟摆效果 ,在项目中经常会遇到,今天小编把基于HTML5+CSS3实现简单的时钟效果的实现代码分享到脚本之家平台,需要的额朋友参考下吧目的: 利用html5,css实现钟摆 ...
让人脸动起来html源码,分享利用HTML5的Canvas制作人脸的实例代码
这里主要使用了 HTML5 的 Canvas 进行绘制.利用html5制作人脸的实例代码. 先看我们要绘制的人脸效果图: 这里主要使用了 HTML5 的 Canvas 进行绘制. 下面我们开始整个绘制 ...
css3网站代码 html5_【实战HTML5与CSS3】用HTML5和CSS3制作页面（上）
前言周一离职并且入职了,于是开始了做新项目,那天我问了下前端大哥,我们做的项目需要兼容哪些浏览器,他说需要兼容IE9以上与chrome,ff,我一下就诡异的笑了.... 这不是HTML5与CSS3项 ...
html 图片选中效果,使用html5 svg和css3制作神奇的图片hover效果
如果你曾经访问过新版的Christmas Experiments网站,那么你一定被网站上的日历效果所吸引.今天我们将和大家一起来研究如何使用SVG和Snap.svg来实现这种效果.思路是用svg创建一 ...
html文字遮罩的用途,使用HTML5和CSS3制作遮罩文字特效
遮罩文字特效指的是文字下面的图片被文字层遮挡住,图片只在文字中显示.这种效果使用photoshop来制作是非常简单的.现在,Webkit内核的浏览器支持CSS3的background-clip属性,它 ...

旋转木马--利用html5和css3制作好看的图片3D旋转效果

旋转木马--利用html5和css3制作好看的图片3D旋转效果相关推荐

最新文章

热门文章