CSS | 旋转木马案例

做一个鼠标放上去就停止的旋转木马案例

section里面有六个小盒子，每个盒子旋转60°

正前面第一个盒子沿着z轴正方向走200px

第二个先y轴旋转60°，然后再沿着z轴走200px（先旋转后方向轴改变）

后面的盒子旋转度数依次递增60°

给body加上透视（用谷歌浏览器打开），给section加上transform-style-preserve-3d；使子盒子保持3d效果

给section加上y轴旋转，做上动画效果

<!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;}section {position: relative;width: 300px;height: 200px;margin: 200px auto;transform-style: preserve-3d;transition: all 12s;/* 添加动画 */animation: rotate 10s infinite linear;background: url(img/笑嘻嘻.jpg);}@keyframes rotate {0% {}100% {transform: rotateY(360deg);}}section div {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(img/风景图.jpg) no-repeat;}section:hover {/* 动画暂停 */animation-play-state: paused;}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>

CSS | 旋转木马案例相关推荐

Css Secret 案例Demo全套
Css Secret 案例全套 github地址案例地址去年买了一本CSS揭秘的css专题书,该书揭示了 47 个鲜为人知的 CSS 技巧,主要内容包括背景与边框.形状. 视觉效果.字体排印.用户 ...
CSS实验案例02简单专业介绍网页
文章目录 CSS实验案例02简单专业介绍网页 2.1CSS 2.2HTML CSS实验案例02简单专业介绍网页 2.1CSS body {/* 主体*/font-size: 24px;text-ali ...
HTML——3D旋转+动画旋转木马案例
旋转木马案例效果外面的图片围绕中间的图片旋转,鼠标悬停停止旋转. 思路不用鼠标悬停就能实现旋转需要用到动画来实现,@keyframes内设置transform: rotateY();当鼠标悬停时 ...
经典网页设计：30个创意的 CSS 应用案例
2012年涌现出众多令人印象深刻的 CSS 网站作品,这些网站充分应用 CSS 的强大特性实现各种绚丽的视觉效果.我根据过去 CSS 典型的应用场景挑选了其中的优秀作品组成一个列表,如果你有收藏更好的 ...
CSS3 3D转换和旋转木马案例
文章目录前言有什么特点一.三维坐标系 3D转换二.3D移动translate3d 三.透视perspective 四.translateZ 五.3D旋转rotate3d 六. 3D呈现tran ...
web前端之CSS样式案例--博雅网页
前言 CSS已经学了一些基础内容了,我们来讲解一个小案例吧.以博雅互动的官网首页举例. 版心首页的版心如下: 这里我们要普及一个概念,叫"版心".版心是页面中主要内容所在的区域. ...
04 CSS样式案例
1 选择器 1.1 标签选择器 p {color:red; font-size: 25px;} 1.2 类选择器 /* 类选择器 */ .red {color: red; width: 50px; ...
HTML+CSS练习案例
系列文章目录前端基础学习入门之html+css的使用文章目录系列文章目录前言一.移动端页面? 二.具体代码 1.index.html 2.index.css 3.normalize.css ...
千锋逆战班，css注册案例
千锋学习的第四十八天, 不积跬步无以至千里,不积小流无以成江河: 注册案例代码: <!DOCTYPE html> <html><head><meta char ...

CSS | 旋转木马案例

CSS | 旋转木马案例相关推荐

最新文章

热门文章