CSS3实现旋转正方体、旋转木马

最新推荐文章于 2024-07-06 13:17:42 发布

pumark

最新推荐文章于 2024-07-06 13:17:42 发布

阅读量312

点赞数

文章标签： css3 3d

本文链接：https://blog.csdn.net/qq_38870665/article/details/108293045

版权

文章目录

一.CSS3实现旋转正方体
二.旋转木马

一.CSS3实现旋转正方体

效果图
在这里插入图片描述

<!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;}
        .box{
    width: 300px;height: 300px;margin: 30px auto;border: 1px solid black;perspective: 200px;perspective-origin:top;}/*perpspective设置景深,perspective-orign设置观察的基点*/
        .box ul{
    list-style: none;width: 100px;height: 100px;margin: 100px;position: relative;transition: 2s;transform-style:preserve-3d;transform-origin: center center -50px;}/*transform-style: preserve-3d显示3d效果 perspective设置景深也是必不可少  transform-origin设置旋转的基点*/
        .box ul  li{
    width: 100px;height: 100px;position: absolute;font-size: 30px;text-align: center;line-height: 100px;opacity: 0.3;/*backface-visibility: hidden;*/}
        .box ul li:nth-of-type(1){
    background: red;left: 0;top: 0;}
        .box ul li:nth-of-type(2){
    background: blue;left: 100px;top: 0;transform-origin: left;transform: rotateY(90deg);}/*2号以左边为基点,向右旋转90度(正)*/
        .box ul li:nth-of-type(3){
    background

最低0.47元/天解锁文章

pumark

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS3实现旋转正方体、旋转木马

文章目录一.CSS3实现旋转正方体二.旋转木马一.CSS3实现旋转正方体效果图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>正方体
复制链接

扫一扫