web CSS3 实现3D旋转木马
3D 旋转木马是CSS中常见的特效之一,旋转木马可以有多种方法实现,这里我使用纯CSS实现这种动画的效果。
简要介绍一下重点
transform: rotateY(60deg) translateZ(300px);
这是必须先旋转后 沿着z轴移动,不然会错乱,translateZ是沿着Z轴移动,其值越大,我们看见的图像就越大。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<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: 150px auto;
transform-style: preserve-3d;
animation: roate 10s linear infinite;
} section div {
position: absolute;
top:;
left:;
width: 100%;
height: 100%;
/* background: url(media/dog.jpg) no-repeat; */
background-color: yellow;
} section:hover {
animation-play-state: paused;
} @keyframes roate {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(360deg);
}
} section div:nth-child(1) {
transform: rotateY(0) translateZ(300px);
/* 可以添加自己想添加的图片 这里用背景色pink代替 下面都一样*/
background-color: pink;
} 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>
web CSS3 实现3D旋转木马的更多相关文章
- CSS3 实现3D旋转木马效果
基本原理: 1.首先我们需要让图片能旋转的效果,我们让所有图片绝对定位(position:absolute),共用一个中心点. 2.对于舞台我们加一个视距,比如下面的demo是 perspective ...
- web CSS3 实现3D动态翻牌效果
使用纯CSS3 实现翻牌效果 需要注意要给子盒子使用绝对定位,这样两个盒子可以完全重合在一起,需要给父盒子一个 transform-style: preserve-3d;让子盒子翻转时保持3D效果, ...
- 网页特效:用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- css3的3D和2D
css3的3D旋转:rorateX():参数为正值时,盒子是围绕x轴,完成从Y轴正方向到Y轴负方向的旋转,视觉上呈现高度上的变化.rorateY():参数为正值时,盒子是围绕Y轴,完成从X轴正方向到X ...
- 使用 CSS3 实现 3D 图片滑块效果【附源码下载】
使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...
- CSS3之3D变换实例详解
CSS3的3D效果很赞,本文实现简单的两种3D翻转效果.首先看效果和源代码,文末是文绉绉的总结部分^_^ 以下CSS代码为了简洁没有添加前缀,请视情况自行添加(自动化时代推荐使用其他的一些方法,如gu ...
- CSS3 transforms 3D翻开
R T L B <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- 使用CSS3实现3D图片滑块效果
使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...
- 一款基于css3的3D图片翻页切换特效
今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id= ...
随机推荐
- Sequence in the Pocket【思维+规律】
Sequence in the Pocket 题目链接(点击) DreamGrid has just found an integer sequence in his right pocket. A ...
- 安装elasticsearch的坑
elasticsearch启动报“此时不应有 \Common 原因 Java 环境变量出错 解决 修改 elasticsearch.bat , 添加一句 : SET params='%*' SET J ...
- Activity学习笔记1
Activity概述 简单的理解Activity就是指Android手机或平板的一个屏,类似Window的一个窗口,浏览器的一个页面. Activity的4种状态 Activity的生命周期 创建Ac ...
- 2020年最新78道JVM面试题总结(含答案解析和思维导图)
前言 关于JVM系列面试知识点总结了一个思维导图,分享给大家 1.java中会存在内存泄漏吗,请简单描述. 会.自己实现堆载的数据结构时有可能会出现内存泄露. 2.64 位 JVM 中,int 的长度 ...
- 安卓开发-Activity-多个Activity的开发方法。
原文链接:https://blog.csdn.net/weixin_38420342/article/details/84344496 一.切换Activity的5种方式 Intent intent ...
- 修改VirtualBox中mac的分辨率
转自 http://www.ztyhome.com/virtualbox-mac-fen-bian-lv/?replytocom=3162 最近在windows上用VirtualBox安装了MAC o ...
- 「从零单排canal 03」 canal源码分析大纲
在前面两篇中,我们从基本概念理解了canal是一个什么项目,能应用于什么场景,然后通过一个demo体验,有了基本的体感和认识. 从这一篇开始,我们将从源码入手,深入学习canal的实现方式.了解can ...
- Python 简明教程 --- 20,Python 类中的属性与方法
微信公众号:码农充电站pro 个人主页:https://codeshellme.github.io 与客户保持良好的关系可以使生产率加倍. -- Larry Bernstain 目录 类中的变量称为属 ...
- Docker搭建Rancher平台
sudo docker run -d --restart=unless-stopped -p 8080:8080 rancher/server service docker resatrt启动失败 ...
- Python实用笔记 (16)函数式编程——偏函数
假设要转换大量的二进制字符串,每次都传入int(x, base=2)非常麻烦,于是,我们想到,可以定义一个int2()的函数,默认把base=2传进去: def int2(x, base=2): re ...