「网易官方」极客战记(codecombat)攻略-网页开发2-变换性质-transformative-properties

「网易官方」极客战记(codecombat)攻略-网页开发2-变换性质-transformative-properties_第1张图片
(点击图片进入关卡)

使用变换旋转,缩放或移动元素!

简介

transform 用于对元素应用独特的效果。

img {
    transform: rotate(180deg) scale(3) translateX(-20px);
}

默认代码

 

    
    "/file/db/thang.type/5466d4f2417c8b48a9811e87/portrait.png">
    
    "/file/db/thang.type/52e95b4222efc8e70900175d/portrait.png">
    
    "/file/db/thang.type/55652fb3b9effa46a1f775fd/portrait.png">
    
    "/file/db/thang.type/55e1a6e876cb0948c96af9f8/portrait.png">
    
    "/file/db/thang.type/575848b522179b2800efbfbf/portrait.png">
    
    "/file/db/thang.type/57588f09046caf2e0012ed41/portrait.png">
    
    "/file/db/thang.type/529ec584c423d4e83b000014/portrait.png">
    
    "/file/db/thang.type/52e9adf7427172ae56002172/portrait.png">

概览

# 变换

transform CSS属性将特定的方法应用于元素的布局。 用它可以扭转、变换得到独特的元素呈现方式!

img {
    transform:rotate(30deg)scale(2)translateX(100px);
}

#旋转

rotate 使元素旋转一定的量。它需要一个类型为 deg 的单位(deg表示度degree)。

img {
    transform: rotate(-40deg);
}

#平移

translateX 和 translateY 分别向左/右和上/下移动元素。

img {
    transform: translateY(-100px);
}

#缩放

scale 可以使元素变大(若数字> 1)或变小(若数字<1)

img {
    transform: scale(0.25);
}

变换性质 解法

 

    
    "/file/db/thang.type/5466d4f2417c8b48a9811e87/portrait.png">
    
    "/file/db/thang.type/52e95b4222efc8e70900175d/portrait.png">
    
    "/file/db/thang.type/55652fb3b9effa46a1f775fd/portrait.png">
    
    "/file/db/thang.type/55e1a6e876cb0948c96af9f8/portrait.png">
    
    "/file/db/thang.type/575848b522179b2800efbfbf/portrait.png">
    
    "/file/db/thang.type/57588f09046caf2e0012ed41/portrait.png">
    
    "/file/db/thang.type/529ec584c423d4e83b000014/portrait.png">
    
    "/file/db/thang.type/52e9adf7427172ae56002172/portrait.png">
 

本攻略发于极客战记官方教学栏目,原文地址为:

https://codecombat.163.com/news/jikezhanji-bianhuanxingzhi

极客战记——学编程,用玩的!

你可能感兴趣的:(「网易官方」极客战记(codecombat)攻略-网页开发2-变换性质-transformative-properties)